Merge branch 'v2-ui' of http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev into v2-ui

2025-05-13 16:54:37 +05:30
parent d9b5f1e2d2 4e1ca6ae2d
commit 8ef37039f0
29 changed files with 622 additions and 478 deletions
--- a/app/src/assets/textures/floor/black.png
+++ b/app/src/assets/textures/floor/black.png
--- a/app/src/assets/textures/floor/factory
+++ b/app/src/assets/textures/floor/factory
--- a/app/src/assets/textures/floor/wall-tex.png
+++ b/app/src/assets/textures/floor/wall-tex.png
--- a/app/src/assets/textures/floor/white.png
+++ b/app/src/assets/textures/floor/white.png
--- a/app/src/components/layout/sidebarLeft/Assets.tsx
+++ b/app/src/components/layout/sidebarLeft/Assets.tsx
@@ -1,9 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Search from "../../ui/inputs/Search";
 import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
-import arch from "../../../assets/gltf-glb/arch.glb";
-import door from "../../../assets/gltf-glb/door.glb";
-import window from "../../../assets/gltf-glb/window.glb";
 import { fetchAssets } from "../../../services/marketplace/fetchAssets";
 import { useSelectedItem } from "../../../store/store";

@@ -16,8 +13,6 @@ import storage from "../../../assets/image/categories/storage.png";
 import office from "../../../assets/image/categories/office.png";
 import safety from "../../../assets/image/categories/safety.png";
 import feneration from "../../../assets/image/categories/feneration.png";
-import archThumbnail from "../../../assets/image/localAssets/arch.png";
-import windowThumbnail from "../../../assets/image/localAssets/window.png";
 import SkeletonUI from "../../templates/SkeletonUI";
 // -------------------------------------

@@ -90,24 +85,7 @@ const Assets: React.FC = () => {

  useEffect(() => {
    setCategoryList([
-      {
-        assetName: "Doors",
-        assetImage: "",
-        category: "Feneration",
-        categoryImage: feneration,
-      },
-      {
-        assetName: "Windows",
-        assetImage: "",
-        category: "Feneration",
-        categoryImage: feneration,
-      },
-      {
-        assetName: "Pillars",
-        assetImage: "",
-        category: "Feneration",
-        categoryImage: feneration,
-      },
+      { category: "Fenestration", categoryImage: feneration },
      { category: "Vehicles", categoryImage: vehicle },
      { category: "Workstation", categoryImage: workStation },
      { category: "Machines", categoryImage: machines },
@@ -121,44 +99,15 @@ const Assets: React.FC = () => {
  const fetchCategoryAssets = async (asset: any) => {
    setisLoading(true);
    setSelectedCategory(asset);
-    if (asset === "Feneration") {
-      const localAssets: AssetProp[] = [
-        {
-          filename: "arch",
-          category: "Feneration",
-          url: arch,
-          thumbnail: archThumbnail,
-          tags: "arch",
-        },
-        {
-          filename: "door",
-          category: "Feneration",
-          url: door,
-          thumbnail: feneration,
-          tags: "door",
-        },
-        {
-          filename: "window",
-          category: "Feneration",
-          url: window,
-          thumbnail: windowThumbnail,
-          tags: "window",
-        },
-      ];
-      setCategoryAssets(localAssets);
-      setFiltereredAssets(localAssets);
+    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);
-    } else {
-      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);
-      }
    }
  };

@@ -167,64 +116,21 @@ const Assets: React.FC = () => {
      <Search onChange={handleSearchChange} />
      <div className="assets-list-section">
        <section>
-          {isLoading ? (
-            <SkeletonUI type="asset" /> // Show skeleton when loading
-          ) : searchValue ? (
-            <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}
-                      className="assets"
-                      id={asset.filename}
-                      title={asset.filename}
-                    >
-                      <img
-                        src={asset?.thumbnail}
-                        alt={asset.filename}
-                        className="asset-image"
-                      />
-
-                      <div className="asset-name">
-                        {asset.filename
-                          .split("_")
-                          .map(
-                            (word: any) =>
-                              word.charAt(0).toUpperCase() + word.slice(1)
-                          )
-                          .join(" ")}
-                      </div>
+          {(() => {
+            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>
-              </div>
-            </div>
-          ) : (
-            <>
-              {selectedCategory ? (
-                <div className="assets-wrapper">
-                  <h2>
-                    {selectedCategory}{" "}
-                    <div
-                      className="back-button"
-                      id="asset-backButtom"
-                      onClick={() => {
-                        setSelectedCategory(null);
-                        setCategoryAssets([]);
-                      }}
-                    >
-                      ← Back
-                    </div>
-                  </h2>
-                  <div className="assets-container">
-                    {categoryAssets &&
-                      categoryAssets?.map((asset: any, index: number) => (
+                    <div className="assets-container">
+                      {categoryAssets?.map((asset: any, index: number) => (
                        <div
-                          key={index}
+                          key={`${index}-${asset.filename}`}
                          className="assets"
                          id={asset.filename}
                          title={asset.filename}
@@ -233,17 +139,8 @@ const Assets: React.FC = () => {
                            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("_")
@@ -255,40 +152,104 @@ const Assets: React.FC = () => {
                          </div>
                        </div>
                      ))}
+                    </div>
                  </div>
                </div>
-              ) : (
+              );
+            }
+
+            if (selectedCategory) {
+              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}
-                          className="category"
-                          id={category}
-                          onClick={() => fetchCategoryAssets(category)}
-                        >
-                          <img
-                            src={categoryInfo?.categoryImage || ""}
-                            alt={category}
-                            className="category-image"
-                            draggable={false}
-                          />
-                          <div className="category-name">{category}</div>
+                  <h2>
+                    {selectedCategory}
+                    <button
+                      className="back-button"
+                      id="asset-backButtom"
+                      onClick={() => {
+                        setSelectedCategory(null);
+                        setCategoryAssets([]);
+                      }}
+                    >
+                      ← Back
+                    </button>
+                  </h2>
+                  <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,
+                            });
+                          }}
+                        />
+                        <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 (
+                      <button
+                        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>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })()}
        </section>
      </div>
    </div>
--- a/app/src/components/layout/sidebarLeft/Header.tsx
+++ b/app/src/components/layout/sidebarLeft/Header.tsx
@@ -6,7 +6,7 @@ import useToggleStore from "../../../store/useUIToggleStore";
 import useModuleStore from "../../../store/useModuleStore";

 const Header: React.FC = () => {
-  const { toggleUI, setToggleUI } = useToggleStore();
+  const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
  const { activeModule } = useModuleStore();

  return (
@@ -20,15 +20,17 @@ const Header: React.FC = () => {
        </div>
      </div>
      <button
-        className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
+        className={`toggle-sidebar-ui-button ${!toggleUILeft ? "active" : ""}`}
        onClick={() => {
          if (activeModule !== "market") {
-            setToggleUI(!toggleUI);
-            localStorage.setItem("navBarUi", JSON.stringify(!toggleUI));
+            setToggleUI(!toggleUILeft, toggleUIRight);
+            localStorage.setItem("navBarUiLeft", JSON.stringify(!toggleUILeft));
          }
        }}
      >
-        <div className="tooltip">{toggleUI ? "Hide" : "Show"} sidebar (ctrl + \)</div>
+        <div className="tooltip">
+          {toggleUILeft ? "Hide" : "Show"} sidebar (ctrl + [)
+        </div>
        <ToggleSidebarIcon />
      </button>
    </div>
--- a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx
+++ b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx
@@ -12,7 +12,7 @@ import Search from "../../ui/inputs/Search";
 const SideBarLeft: React.FC = () => {
  const [activeOption, setActiveOption] = useState("Widgets");

-  const { toggleUI } = useToggleStore();
+  const { toggleUILeft } = useToggleStore();
  const { activeModule } = useModuleStore();

  // Reset activeOption whenever activeModule changes
@@ -31,47 +31,55 @@ const SideBarLeft: React.FC = () => {
  };

  return (
-    <div className={`sidebar-left-wrapper ${toggleUI ? "open" : "closed"}`}>
+    <div className={`sidebar-left-wrapper ${toggleUILeft ? "open" : "closed"}`}>
      <Header />
-      {toggleUI && (
+      {toggleUILeft && (
        <div className={`sidebar-left-container `}>
-          {activeModule === "visualization" ? (
-            <>
-              <ToggleHeader
-                options={["Widgets", "Templates"]}
-                activeOption={activeOption}
-                handleClick={handleToggleClick}
-              />
-              <Search onChange={handleSearchChange} />
-              <div className="sidebar-left-content-container">
-                {activeOption === "Widgets" ? <Widgets /> : <Templates />}
-              </div>
-            </>
-          ) : activeModule === "market" ? (
-            <></>
-          ) : activeModule === "builder" ? (
-            <>
-              <ToggleHeader
-                options={["Outline", "Assets"]}
-                activeOption={activeOption}
-                handleClick={handleToggleClick}
-              />
-              <div className="sidebar-left-content-container">
-                {activeOption === "Outline" ? <Outline /> : <Assets />}
-              </div>
-            </>
-          ) : (
-            <>
-              <ToggleHeader
-                options={["Outline"]}
-                activeOption={activeOption}
-                handleClick={handleToggleClick}
-              />
-              <div className="sidebar-left-content-container">
-                {activeOption === "Outline" ? <Outline /> : <Assets />}
-              </div>
-            </>
-          )}
+          {(() => {
+            if (activeModule === "visualization") {
+              return (
+                <>
+                  <ToggleHeader
+                    options={["Widgets", "Templates"]}
+                    activeOption={activeOption}
+                    handleClick={handleToggleClick}
+                  />
+                  <Search onChange={handleSearchChange} />
+                  <div className="sidebar-left-content-container">
+                    {activeOption === "Widgets" ? <Widgets /> : <Templates />}
+                  </div>
+                </>
+              );
+            } else if (activeModule === "market") {
+              return <></>;
+            } else if (activeModule === "builder") {
+              return (
+                <>
+                  <ToggleHeader
+                    options={["Outline", "Assets"]}
+                    activeOption={activeOption}
+                    handleClick={handleToggleClick}
+                  />
+                  <div className="sidebar-left-content-container">
+                    {activeOption === "Outline" ? <Outline /> : <Assets />}
+                  </div>
+                </>
+              );
+            } else {
+              return (
+                <>
+                  <ToggleHeader
+                    options={["Outline"]}
+                    activeOption={activeOption}
+                    handleClick={handleToggleClick}
+                  />
+                  <div className="sidebar-left-content-container">
+                    {activeOption === "Outline" ? <Outline /> : <Assets />}
+                  </div>
+                </>
+              );
+            }
+          })()}
        </div>
      )}
    </div>
--- a/app/src/components/layout/sidebarRight/Header.tsx
+++ b/app/src/components/layout/sidebarRight/Header.tsx
@@ -5,10 +5,15 @@ import { ActiveUser } from "../../../types/users";
 import CollaborationPopup from "../../templates/CollaborationPopup";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 import { useSelectedUserStore } from "../../../store/useCollabStore";
+import useToggleStore from "../../../store/useUIToggleStore";
+import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
+import useModuleStore from "../../../store/useModuleStore";

 const Header: React.FC = () => {
  const { activeUsers } = useActiveUsers();
  const userName = localStorage.getItem("userName") ?? "Anonymous";
+  const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
+  const { activeModule } = useModuleStore();

  const guestUsers: ActiveUser[] = activeUsers.filter(
    (user: ActiveUser) => user.userName !== userName
@@ -55,6 +60,25 @@ const Header: React.FC = () => {
      )}
      <div className="header-container">
        <div className="options-container">
+          <button
+            className={`toggle-sidebar-ui-button ${
+              !toggleUIRight ? "active" : ""
+            }`}
+            onClick={() => {
+              if (activeModule !== "market") {
+                setToggleUI(toggleUILeft, !toggleUIRight);
+                localStorage.setItem(
+                  "navBarUiRight",
+                  JSON.stringify(!toggleUIRight)
+                );
+              }
+            }}
+          >
+            <div className="tooltip">
+              {toggleUIRight ? "Hide" : "Show"} sidebar (ctrl + ])
+            </div>
+            <ToggleSidebarIcon />
+          </button>
          <button
            className="share-button"
            onClick={() => {
--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@@ -28,7 +28,7 @@ import VersionHistory from "./versionHisory/VersionHistory";

 const SideBarRight: React.FC = () => {
  const { activeModule } = useModuleStore();
-  const { toggleUI } = useToggleStore();
+  const { toggleUIRight } = useToggleStore();
  const { subModule, setSubModule } = useSubModuleStore();
  const { selectedFloorItem } = useSelectedFloorItem();
  const { selectedEventData } = useSelectedEventData();
@@ -59,9 +59,9 @@ const SideBarRight: React.FC = () => {
  }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);

  return (
-    <div className={`sidebar-right-wrapper ${toggleUI ? "open" : "closed"}`}>
+    <div className={`sidebar-right-wrapper ${toggleUIRight ? "open" : "closed"}`}>
      <Header />
-      {toggleUI && (
+      {toggleUIRight && (
        <div className="sidebar-actions-container">
          {activeModule !== "simulation" && (
            <button
@@ -120,7 +120,7 @@ const SideBarRight: React.FC = () => {
        </div>
      )}

-      {toggleUI && viewVersionHistory && (
+      {toggleUIRight && viewVersionHistory && (
        <div className="sidebar-right-container">
          <div className="sidebar-right-content-container">
            <VersionHistory />
@@ -129,7 +129,7 @@ const SideBarRight: React.FC = () => {
      )}

      {/* process builder */}
-      {toggleUI &&
+      {toggleUIRight &&
        !viewVersionHistory &&
        subModule === "properties" &&
        activeModule !== "visualization" &&
@@ -140,7 +140,7 @@ const SideBarRight: React.FC = () => {
            </div>
          </div>
        )}
-      {toggleUI &&
+      {toggleUIRight &&
        !viewVersionHistory &&
        subModule === "properties" &&
        activeModule !== "visualization" &&
@@ -152,7 +152,7 @@ const SideBarRight: React.FC = () => {
          </div>
        )}

-      {toggleUI &&
+      {toggleUIRight &&
        !viewVersionHistory &&
        subModule === "zoneProperties" &&
        (activeModule === "builder" || activeModule === "simulation") && (
@@ -163,7 +163,7 @@ const SideBarRight: React.FC = () => {
          </div>
        )}
      {/* simulation */}
-      {toggleUI && !viewVersionHistory && activeModule === "simulation" && (
+      {toggleUIRight && !viewVersionHistory && activeModule === "simulation" && (
        <>
          {subModule === "simulations" && (
            <div className="sidebar-right-container">
@@ -189,7 +189,7 @@ const SideBarRight: React.FC = () => {
        </>
      )}
      {/* realtime visualization */}
-      {toggleUI && activeModule === "visualization" && <Visualization />}
+      {toggleUIRight && activeModule === "visualization" && <Visualization />}
    </div>
  );
 };
--- a/app/src/components/templates/SkeletonUI.tsx
+++ b/app/src/components/templates/SkeletonUI.tsx
@@ -7,7 +7,6 @@ interface SkeletonUIProps {

 // Define the SkeletonUI component
 const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {
-
  // Function to render skeleton content based on 'type'
  const renderSkeleton = () => {
    switch (type) {
@@ -38,17 +37,28 @@ const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {
      case "asset":
        return (
          <>
-            <div className="skeleton-content">
-              <div className="skeleton asset-name"></div>
-              <div className="skeleton asset"></div>
-            </div>
-            <div className="skeleton-content">
-              <div className="skeleton asset-name"></div>
-              <div className="skeleton asset"></div>
+            <div className="skeleton asset-category-title"></div>
+            <div className="skeleton-content-asset">
+              <div className="skeleton-content">
+                <div className="skeleton asset-name"></div>
+                <div className="skeleton asset"></div>
+              </div>
+              <div className="skeleton-content">
+                <div className="skeleton asset-name"></div>
+                <div className="skeleton asset"></div>
+              </div>
+              <div className="skeleton-content">
+                <div className="skeleton asset-name"></div>
+                <div className="skeleton asset"></div>
+              </div>
+              <div className="skeleton-content">
+                <div className="skeleton asset-name"></div>
+                <div className="skeleton asset"></div>
+              </div>
            </div>
          </>
        );
-        
+
      default:
        return (
          <div className="skeleton-content">
--- a/app/src/components/ui/FileMenu.tsx
+++ b/app/src/components/ui/FileMenu.tsx
@@ -32,7 +32,7 @@ const FileMenu: React.FC = () => {
  }, []);

  // project
-  const [projectName, setProjectName] = useState("project 1");
+  const [projectName, setProjectName] = useState("Demo Project");

  // Load project name from localStorage on mount
  useEffect(() => {
--- a/app/src/components/ui/ModuleToggle.tsx
+++ b/app/src/components/ui/ModuleToggle.tsx
@@ -22,8 +22,11 @@ const ModuleToggle: React.FC = () => {
          setActiveModule("builder");
          setVersionHistory(false);
          setToggleUI(
-            localStorage.getItem("navBarUi")
-              ? localStorage.getItem("navBarUi") === "true"
+            localStorage.getItem("navBarUiLeft")
+              ? localStorage.getItem("navBarUiLeft") === "true"
+              : true,
+            localStorage.getItem("navBarUiRight")
+              ? localStorage.getItem("navBarUiRight") === "true"
              : true
          );
        }}
@@ -41,8 +44,11 @@ const ModuleToggle: React.FC = () => {
          setActiveModule("simulation");
          setVersionHistory(false);
          setToggleUI(
-            localStorage.getItem("navBarUi")
-              ? localStorage.getItem("navBarUi") === "true"
+            localStorage.getItem("navBarUiLeft")
+              ? localStorage.getItem("navBarUiLeft") === "true"
+              : true,
+            localStorage.getItem("navBarUiRight")
+              ? localStorage.getItem("navBarUiRight") === "true"
              : true
          );
        }}
@@ -60,8 +66,11 @@ const ModuleToggle: React.FC = () => {
          setActiveModule("visualization");
          setVersionHistory(false);
          setToggleUI(
-            localStorage.getItem("navBarUi")
-              ? localStorage.getItem("navBarUi") === "true"
+            localStorage.getItem("navBarUiLeft")
+              ? localStorage.getItem("navBarUiLeft") === "true"
+              : true,
+            localStorage.getItem("navBarUiRight")
+              ? localStorage.getItem("navBarUiRight") === "true"
              : true
          );
        }}
@@ -76,7 +85,7 @@ const ModuleToggle: React.FC = () => {
        onClick={() => {
          setActiveModule("market");
          setVersionHistory(false);
-          setToggleUI(false);
+          setToggleUI(false, false);
        }}
      >
        <div className="icon">
--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -71,8 +71,11 @@ const Tools: React.FC = () => {
  // Reset activeTool whenever activeModule changes
  useEffect(() => {
    setToggleUI(
-      localStorage.getItem("navBarUi")
-        ? localStorage.getItem("navBarUi") === "true"
+      localStorage.getItem("navBarUiLeft")
+        ? localStorage.getItem("navBarUiLeft") === "true"
+        : true,
+      localStorage.getItem("navBarUiRight")
+        ? localStorage.getItem("navBarUiRight") === "true"
        : true
    );
  }, []);
@@ -93,8 +96,11 @@ const Tools: React.FC = () => {
      setToggleView(false);
    }
    setToggleUI(
-      localStorage.getItem("navBarUi")
-        ? localStorage.getItem("navBarUi") === "true"
+      localStorage.getItem("navBarUiLeft")
+        ? localStorage.getItem("navBarUiLeft") === "true"
+        : true,
+      localStorage.getItem("navBarUiRight")
+        ? localStorage.getItem("navBarUiRight") === "true"
        : true
    );
    setToggleThreeD(!toggleThreeD);
@@ -119,7 +125,7 @@ const Tools: React.FC = () => {
  }, []);
  useEffect(() => {
    if (!toggleThreeD) {
-      setToggleUI(false);
+      setToggleUI(false, false);
    }
  }, [toggleThreeD]);

--- a/app/src/components/ui/analysis/ROISummary.tsx
+++ b/app/src/components/ui/analysis/ROISummary.tsx
@@ -205,7 +205,7 @@ const ROISummary = ({
                </table>
              </div>
            </div>
-            <div className="tips-section">
+            {/* <div className="tips-section">
              <div className="tip-header">
                <span className="lightbulb-icon">
                  <LightBulpIcon />
@@ -224,7 +224,7 @@ const ROISummary = ({
              <button className="get-tips-button">
                <div className="btn">Get ROI Boost Tips</div>
              </button>
-            </div>
+            </div> */}
          </>
        ) : (
          <SkeletonUI type={"default"} />
--- a/app/src/components/ui/analysis/ThroughputSummary.tsx
+++ b/app/src/components/ui/analysis/ThroughputSummary.tsx
@@ -5,7 +5,7 @@ import SkeletonUI from "../../templates/SkeletonUI";

 const ProductionCapacity = ({
  progressPercent = 50,
-  avgProcessTime = "28.4 Secs/unit",
+  avgProcessTime = "28.4",
  machineUtilization = "78%",
  throughputValue = 128,
  timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
@@ -34,7 +34,7 @@ const ProductionCapacity = ({
          <>
            <div className="process-container">
              <div className="throughput-value">
-                <span className="value">{throughputValue}</span> Units/hour
+                <span className="value">{avgProcessTime}</span> secs/unit
              </div>

              {/* Dynamic Progress Bar */}
@@ -56,8 +56,8 @@ const ProductionCapacity = ({

            <div className="metrics-section">
              <div className="metric">
-                <span className="label">Avg. Process Time</span>
-                <span className="value">{avgProcessTime}</span>
+                <span className="label">Units/hour</span>
+                <span className="value">{throughputValue} avg.</span>
              </div>
              <div className="metric">
                <span className="label">Machine Utilization</span>
--- a/app/src/components/ui/menu/menu.tsx
+++ b/app/src/components/ui/menu/menu.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { ArrowIcon } from "../../icons/ExportCommonIcons";
 import { toggleTheme } from "../../../utils/theme";
 import useVersionHistoryStore, { useShortcutStore } from "../../../store/store";
+import { useNavigate } from "react-router-dom";
 import { useSubModuleStore } from "../../../store/useModuleStore";

 interface MenuBarProps {
@@ -9,6 +10,7 @@ interface MenuBarProps {
 }

 const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
+  const navigate = useNavigate();
  const [activeMenu, setActiveMenu] = useState<string | null>(null);
  const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);

@@ -36,6 +38,12 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {

  const savedTheme: string | null = localStorage.getItem("theme") ?? "light";

+
+  const handleLogout = () => {
+    localStorage.clear(); // 1. Clear all localStorage
+    navigate('/');        // 2. Redirect to homepage
+  };
+
  return (
    <div
      className="menu-bar"
@@ -552,6 +560,9 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
            </div>
          )}
        </div>
+        <div className="menu-button-container" onClick={handleLogout}>
+          <div className="menu-button">Log out</div>
+        </div>
      </div>
    </div>
  );
--- a/app/src/modules/builder/geomentries/floors/addFloorToScene.ts
+++ b/app/src/modules/builder/geomentries/floors/addFloorToScene.ts
@@ -2,8 +2,8 @@ import * as THREE from 'three';
 import * as Types from "../../../../types/world/worldTypes";
 import * as CONSTANTS from "../../../../types/world/worldConstants";

-import texturePath from "../../../../assets/textures/floor/concreteFloorWorn001Diff2k.jpg";
-import normalPath from "../../../../assets/textures/floor/concreteFloorWorn001NorGl2k.jpg";
+import texturePath from "../../../../assets/textures/floor/white.png";
+import texturePathDark from "../../../../assets/textures/floor/black.png";

 // Cache for materials
 const materialCache = new Map<string, THREE.Material>();
@@ -14,6 +14,8 @@ export default function addFloorToScene(
    floorGroup: Types.RefGroup,
    userData: any,
 ) {
+    const savedTheme: string | null = localStorage.getItem('theme');
+
    const textureLoader = new THREE.TextureLoader();

    const textureScale = CONSTANTS.floorConfig.textureScale;
@@ -24,20 +26,17 @@ export default function addFloorToScene(

    if (materialCache.has(materialKey)) {
        material = materialCache.get(materialKey) as THREE.Material;
+        // } else {
    } else {
-        const floorTexture = textureLoader.load(texturePath);
-        const normalMap = textureLoader.load(normalPath);
+        const floorTexture = textureLoader.load(savedTheme === "dark" ? texturePathDark : texturePath);
+        // const floorTexture = textureLoader.load(texturePath);

        floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
        floorTexture.repeat.set(textureScale, textureScale);
        floorTexture.colorSpace = THREE.SRGBColorSpace;

-        normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping;
-        normalMap.repeat.set(textureScale, textureScale);
-
        material = new THREE.MeshStandardMaterial({
            map: floorTexture,
-            normalMap: normalMap,
            side: THREE.DoubleSide,
        });

--- a/app/src/modules/builder/groups/floorItemsGroup.tsx
+++ b/app/src/modules/builder/groups/floorItemsGroup.tsx
@@ -1,7 +1,6 @@
 import { useFrame, useThree } from "@react-three/fiber";
 import {
    useActiveTool,
-    useAsset3dWidget,
    useCamMode,
    useDeletableFloorItem,
    useDeleteTool,
@@ -14,7 +13,6 @@ import {
    useToggleView,
    useTransformMode,
 } from "../../../store/store";
-import assetVisibility from "../geomentries/assets/assetVisibility";
 import { useEffect } from "react";
 import * as THREE from "three";
 import * as Types from "../../../types/world/worldTypes";
@@ -29,7 +27,6 @@ import loadInitialFloorItems from "../IntialLoad/loadInitialFloorItems";
 import addAssetModel from "../geomentries/assets/addAssetModel";
 import { getFloorAssets } from "../../../services/factoryBuilder/assest/floorAsset/getFloorItemsApi";
 import useModuleStore from "../../../store/useModuleStore";
-// import { retrieveGLTF } from "../../../utils/indexDB/idbUtils";
 import { useEventsStore } from "../../../store/simulation/useEventsStore";

 const assetManagerWorker = new Worker(
@@ -198,9 +195,7 @@ const FloorItemsGroup = ({
            };

            const startInterval = () => {
-                if (!intervalId) {
-                    intervalId = setInterval(handleChange, 50);
-                }
+                intervalId ??= setInterval(handleChange, 50);
            };

            const stopInterval = () => {
--- a/app/src/modules/builder/groups/wallsAndWallItems.tsx
+++ b/app/src/modules/builder/groups/wallsAndWallItems.tsx
@@ -1,56 +1,92 @@
 import { Geometry } from "@react-three/csg";
-import { useDeleteTool, useSelectedWallItem, useToggleView, useTransformMode, useWallItems, useWalls } from "../../../store/store";
+import {
+  useDeleteTool,
+  useSelectedWallItem,
+  useToggleView,
+  useTransformMode,
+  useWallItems,
+  useWalls,
+} from "../../../store/store";
 import handleMeshDown from "../eventFunctions/handleMeshDown";
 import handleMeshMissed from "../eventFunctions/handleMeshMissed";
 import WallsMesh from "./wallsMesh";
 import WallItemsGroup from "./wallItemsGroup";
 import { useEffect } from "react";

+const WallsAndWallItems = ({
+  CSGGroup,
+  AssetConfigurations,
+  setSelectedItemsIndex,
+  selectedItemsIndex,
+  currentWallItem,
+  csg,
+  lines,
+  hoveredDeletableWallItem,
+}: any) => {
+  const { walls } = useWalls();
+  const { wallItems } = useWallItems();
+  const { toggleView } = useToggleView();
+  const { deleteTool } = useDeleteTool();
+  const { transformMode } = useTransformMode();
+  const { setSelectedWallItem } = useSelectedWallItem();

-const WallsAndWallItems = ({ CSGGroup, AssetConfigurations, setSelectedItemsIndex, selectedItemsIndex, currentWallItem, csg, lines, hoveredDeletableWallItem }: any) => {
-    const { walls, setWalls } = useWalls();
-    const { wallItems, setWallItems } = useWallItems();
-    const { toggleView, setToggleView } = useToggleView();
-    const { deleteTool, setDeleteTool } = useDeleteTool();
-    const { transformMode, setTransformMode } = useTransformMode();
-    const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
-
-    useEffect(() => {
-        if (transformMode === null) {
-            if (!deleteTool) {
-                handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex);
-                setSelectedWallItem(null);
-                setSelectedItemsIndex(null);
-            }
+  useEffect(() => {
+    if (transformMode === null) {
+      if (!deleteTool) {
+        handleMeshMissed(
+          currentWallItem,
+          setSelectedWallItem,
+          setSelectedItemsIndex
+        );
+        setSelectedWallItem(null);
+        setSelectedItemsIndex(null);
+      }
+    }
+  }, [transformMode]);
+  return (
+    <mesh
+      ref={CSGGroup as any}
+      name="Walls"
+      key={walls.length}
+      receiveShadow
+      visible={!toggleView}
+      onClick={(event) => {
+        if (!deleteTool && transformMode !== null) {
+          handleMeshDown(
+            event,
+            currentWallItem,
+            setSelectedWallItem,
+            setSelectedItemsIndex,
+            wallItems,
+            toggleView
+          );
        }
-    }, [transformMode])
+      }}
+      onPointerMissed={() => {
+        if (!deleteTool) {
+          handleMeshMissed(
+            currentWallItem,
+            setSelectedWallItem,
+            setSelectedItemsIndex
+          );
+          setSelectedWallItem(null);
+          setSelectedItemsIndex(null);
+        }
+      }}
+    >
+      <Geometry ref={csg as any} computeVertexNormals useGroups>
+        <WallsMesh lines={lines} />
+        <WallItemsGroup
+          currentWallItem={currentWallItem}
+          AssetConfigurations={AssetConfigurations}
+          hoveredDeletableWallItem={hoveredDeletableWallItem}
+          selectedItemsIndex={selectedItemsIndex}
+          setSelectedItemsIndex={setSelectedItemsIndex}
+          CSGGroup={CSGGroup}
+        />
+      </Geometry>
+    </mesh>
+  );
+};

-    return (
-        <mesh
-            ref={CSGGroup as any}
-            name="Walls"
-            key={walls.length}
-            receiveShadow
-            visible={!toggleView}
-            onClick={(event) => {
-                if (!deleteTool && transformMode !== null) {
-                    handleMeshDown(event, currentWallItem, setSelectedWallItem, setSelectedItemsIndex, wallItems, toggleView);
-                }
-            }}
-            onPointerMissed={() => {
-                if (!deleteTool) {
-                    handleMeshMissed(currentWallItem, setSelectedWallItem, setSelectedItemsIndex);
-                    setSelectedWallItem(null);
-                    setSelectedItemsIndex(null);
-                }
-            }}
-        >
-            <Geometry ref={csg as any} computeVertexNormals useGroups>
-                <WallsMesh lines={lines} />
-                <WallItemsGroup currentWallItem={currentWallItem} AssetConfigurations={AssetConfigurations} hoveredDeletableWallItem={hoveredDeletableWallItem} selectedItemsIndex={selectedItemsIndex} setSelectedItemsIndex={setSelectedItemsIndex} CSGGroup={CSGGroup} />
-            </Geometry>
-        </mesh>
-    )
-}
-
-export default WallsAndWallItems;
+export default WallsAndWallItems;
--- a/app/src/modules/builder/groups/wallsMesh.tsx
+++ b/app/src/modules/builder/groups/wallsMesh.tsx
@@ -1,65 +1,78 @@
-import * as THREE from 'three';
-import * as Types from '../../../types/world/worldTypes';
-import * as CONSTANTS from '../../../types/world/worldConstants';
-import { Base } from '@react-three/csg';
-import { MeshDiscardMaterial } from '@react-three/drei';
-import { useUpdateScene, useWalls } from '../../../store/store';
-import { useEffect } from 'react';
-import { getLines } from '../../../services/factoryBuilder/lines/getLinesApi';
-import objectLinesToArray from '../geomentries/lines/lineConvertions/objectLinesToArray';
-import loadWalls from '../geomentries/walls/loadWalls';
+import * as THREE from "three";
+import * as Types from "../../../types/world/worldTypes";
+import * as CONSTANTS from "../../../types/world/worldConstants";
+import { Base } from "@react-three/csg";
+import { MeshDiscardMaterial } from "@react-three/drei";
+import { useUpdateScene, useWalls } from "../../../store/store";
+import React, { useEffect } from "react";
+import { getLines } from "../../../services/factoryBuilder/lines/getLinesApi";
+import objectLinesToArray from "../geomentries/lines/lineConvertions/objectLinesToArray";
+import loadWalls from "../geomentries/walls/loadWalls";
+// texture
+import texturePath from "../../../assets/textures/floor/wall-tex.png";

-const WallsMesh = ({ lines }: any) => {
-    const { walls, setWalls } = useWalls();
-    const { updateScene, setUpdateScene } = useUpdateScene();
+// Cache for materials
+const materialCache = new Map<string, THREE.Material>();

-    useEffect(() => {
-        if (updateScene) {
+const WallsMeshComponent = ({ lines }: any) => {
+  const { walls, setWalls } = useWalls();
+  const { updateScene, setUpdateScene } = useUpdateScene();

-            const email = localStorage.getItem('email')
-            const organization = (email!.split("@")[1]).split(".")[0];
+  useEffect(() => {
+    if (updateScene) {
+      const email = localStorage.getItem("email");
+      const organization = email!.split("@")[1].split(".")[0];

-            getLines(organization).then((data) => {
-                const Lines: Types.Lines = objectLinesToArray(data);
-                localStorage.setItem("Lines", JSON.stringify(Lines));
+      getLines(organization).then((data) => {
+        const Lines: Types.Lines = objectLinesToArray(data);
+        localStorage.setItem("Lines", JSON.stringify(Lines));

-                if (Lines) {
-                    loadWalls(lines, setWalls);
-                }
-            })
-            setUpdateScene(false);
+        if (Lines) {
+          loadWalls(lines, setWalls);
        }
-    }, [updateScene])
+      });
+      setUpdateScene(false);
+    }
+  }, [updateScene]);

-    return (
-        <>
-            {walls.map((wall: Types.Wall, index: number) => (
-                <mesh key={index}>
-                    <Base
-                        name={`Wall${index + 1}`}
-                        geometry={wall[0]}
-                        rotation={wall[1]}
-                        position={wall[2]}
-                        userData={{ WallType: wall[3], Layer: wall[4] }}
-                    >
-                        <meshStandardMaterial
-                            side={THREE.DoubleSide}
-                            color={CONSTANTS.wallConfig.defaultColor}
-                        />
-                    </Base>
-                    <mesh
-                        castShadow
-                        geometry={wall[0]}
-                        rotation={wall[1]}
-                        position={wall[2]}
-                        name={`WallRaycastReference_${index + 1}`}
-                    >
-                        <MeshDiscardMaterial />
-                    </mesh>
-                </mesh>
-            ))}
-        </>
-    )
-}
+  const textureLoader = new THREE.TextureLoader();
+  const wallTexture = textureLoader.load(texturePath);

-export default WallsMesh;
+  wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping;
+  wallTexture.repeat.set(0.1, 0.1);
+  wallTexture.colorSpace = THREE.SRGBColorSpace;
+
+  return (
+    <>
+      {walls.map((wall: Types.Wall, index: number) => (
+        <mesh key={index} renderOrder={1}>
+          <Base
+            name={`Wall${index + 1}`}
+            geometry={wall[0]}
+            rotation={wall[1]}
+            position={wall[2]}
+            userData={{ WallType: wall[3], Layer: wall[4] }}
+          >
+            <meshStandardMaterial
+              side={THREE.DoubleSide}
+              color={CONSTANTS.wallConfig.defaultColor}
+              map={wallTexture}
+            />
+          </Base>
+          <mesh
+            castShadow
+            geometry={wall[0]}
+            rotation={wall[1]}
+            position={wall[2]}
+            name={`WallRaycastReference_${index + 1}`}
+          >
+            <MeshDiscardMaterial />
+          </mesh>
+        </mesh>
+      ))}
+    </>
+  );
+};
+
+const WallsMesh = React.memo(WallsMeshComponent);
+export default WallsMesh;
--- a/app/src/modules/scene/controls/selectionControls/moveControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/moveControls.tsx
@@ -49,7 +49,7 @@ function MoveControls({
    "Ctrl" | "Shift" | "Ctrl+Shift" | ""
  >("");
  const email = localStorage.getItem("email");
-  const organization = email!.split("@")[1].split(".")[0];
+  const organization = email?.split("@")[1].split(".")[0] ?? null;

  const updateBackend = (
    productName: string,
@@ -308,7 +308,7 @@ function MoveControls({
                }
              );

-            if (event) {
+            if (event && organization) {
              updateBackend(
                selectedProduct.productName,
                selectedProduct.productId,
--- a/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
+++ b/app/src/modules/scene/controls/selectionControls/rotateControls.tsx
@@ -22,7 +22,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
    const itemsData = useRef<Types.FloorItems>([]);

    const email = localStorage.getItem('email')
-    const organization = (email!.split("@")[1]).split(".")[0];
+    const organization = (email?.split("@")[1])?.split(".")[0] ?? null;

    const updateBackend = (
        productName: string,
@@ -214,7 +214,7 @@ function RotateControls({ rotatedObjects, setRotatedObjects, movedObjects, setMo
                            rotation: [obj.rotation.x, obj.rotation.y, obj.rotation.z],
                        })

-                        if (event) {
+                        if (event && organization) {
                            updateBackend(
                                selectedProduct.productName,
                                selectedProduct.productId,
--- a/app/src/modules/visualization/RealTimeVisulization.tsx
+++ b/app/src/modules/visualization/RealTimeVisulization.tsx
@@ -187,6 +187,7 @@ const RealTimeVisulization: React.FC = () => {
      <div
        ref={containerRef}
        className="realTime-viz"
+        id="real-time-vis-canvas"
        style={{
          height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
          width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
--- a/app/src/store/useUIToggleStore.ts
+++ b/app/src/store/useUIToggleStore.ts
@@ -1,13 +1,17 @@
 import { create } from "zustand";

 interface ToggleState {
-  toggleUI: boolean; // State to track UI toggle
-  setToggleUI: (value: boolean) => void; // Action to update toggleUI
+  toggleUILeft: boolean;
+  toggleUIRight: boolean;
+  setToggleUI: (value1: boolean, value2: boolean) => void;
 }

 const useToggleStore = create<ToggleState>((set) => ({
-  toggleUI: true, // Initial state
-  setToggleUI: (value: boolean) => set({ toggleUI: value }), // Update the state
+  toggleUILeft: true,
+  toggleUIRight: false,
+  setToggleUI: (value1: boolean, value2: boolean) => {
+    set({ toggleUILeft: value1, toggleUIRight: value2 });
+  },
 }));

 export default useToggleStore;
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -1,6 +1,55 @@
@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;

+.toggle-sidebar-ui-button {
+  @include flex-center;
+  cursor: pointer;
+  height: 32px;
+  width: 32px;
+  min-height: 32px;
+  min-width: 32px;
+  border-radius: #{$border-radius-large};
+  position: relative;
+
+  .tooltip {
+    top: 6px;
+    right: -168px;
+
+    &::after {
+      left: 0px;
+      bottom: 50%;
+    }
+  }
+
+  &:hover {
+    outline: 1px solid var(--border-color);
+    outline-offset: -1px;
+    background: var(--background-color-solid);
+
+    .tooltip {
+      opacity: 1;
+      transform: translateX(2px);
+    }
+  }
+}
+
+.toggle-sidebar-ui-button.active {
+  background: var(--background-color-accent);
+
+  rect {
+    stroke: var(--icon-default-color-active);
+  }
+
+  circle {
+    fill: var(--icon-default-color-active);
+  }
+
+  &:hover {
+    filter: saturate(0.8);
+    background: var(--background-color-accent);
+  }
+}
+
 .sidebar-left-wrapper {
  width: 270px;
  position: fixed;
@@ -34,15 +83,6 @@
    }

    .toggle-sidebar-ui-button {
-      @include flex-center;
-      cursor: pointer;
-      height: 32px;
-      width: 32px;
-      min-height: 32px;
-      min-width: 32px;
-      border-radius: #{$border-radius-large};
-      position: relative;
-
      .tooltip {
        top: 6px;
        right: -168px;
@@ -52,34 +92,6 @@
          bottom: 50%;
        }
      }
-
-      &:hover {
-        outline: 1px solid var(--border-color);
-        outline-offset: -1px;
-        background: var(--background-color-solid);
-
-        .tooltip {
-          opacity: 1;
-          transform: translateX(2px);
-        }
-      }
-    }
-
-    .active {
-      background: var(--background-color-accent);
-
-      rect {
-        stroke: var(--icon-default-color-active);
-      }
-
-      circle {
-        fill: var(--icon-default-color-active);
-      }
-
-      &:hover {
-        filter: saturate(0.8);
-        background: var(--background-color-accent);
-      }
    }
  }

@@ -295,7 +307,7 @@
    padding: 10px;
    padding-left: 16px;
    width: 100%;
-    gap: 12px;
+    gap: 8px;
    height: 52px;

    .options-container {
@@ -318,7 +330,7 @@

    .split {
      height: 20px;
-      width: 2px;
+      min-width: 1px;
      background: var(--text-disabled);
    }

@@ -1166,8 +1178,7 @@
          height: 100%;
          width: 1px;
          position: absolute;
-          color: var(--text-color);
-          opacity: 0.4;
+          color: var(--accent-color);
          font-size: var(--font-size-regular);
          outline-offset: -1px;
          top: 0;
@@ -1431,6 +1442,18 @@
      }
    }
  }
+  .toggle-sidebar-ui-button {
+    svg {
+      transform: scaleX(-1);
+    }
+    .tooltip {
+      right: 56px;
+      &::after {
+        left: 100%;
+        bottom: 50%;
+      }
+    }
+  }
 }

 .assets-container-main {
@@ -1598,7 +1621,11 @@
      height: 100%;
      gap: 6px;
      padding: 2px;
-
+      .no-asset {
+        text-align: center;
+        margin: 12px;
+        width: 100%;
+      }
      .assets {
        width: 122px;
        height: 95px;
@@ -1655,20 +1682,6 @@
  }
 }

-.skeleton-wrapper {
-  display: flex;
-
-  .asset-name {
-    width: 40%;
-    height: 10px;
-  }
-
-  .asset {
-    width: 100%;
-    height: 100%;
-  }
-}
-
 .sidebar-left-wrapper,
 .sidebar-right-wrapper {
  transition: height 0.2s ease-in-out;
--- a/app/src/styles/layout/skeleton.scss
+++ b/app/src/styles/layout/skeleton.scss
@@ -1,61 +1,90 @@
 .skeleton-wrapper {
-    // max-width: 600px;
-    margin: 0 auto;
-    width: 100%;
+  margin: 0 auto;
+  width: 100%;

-    .skeleton {
-        background: var(--background-color-gray);
+  .skeleton {
+    background: var(--background-color-gray);

-        border-radius: 8px;
-        position: relative;
-        overflow: hidden;
+    border-radius: 8px;
+    position: relative;
+    overflow: hidden;

-        &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-image: linear-gradient(90deg,
-                    rgba(255, 255, 255, 0) 0%,
-                    rgba(255, 255, 255, 0.2) 20%,
-                    rgba(255, 255, 255, 0.5) 60%,
-                    rgba(255, 255, 255, 0) 100%);
-            transform: translateX(-100%);
-            animation: shimmer 1.5s infinite;
-        }
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.2) 20%,
+        rgba(255, 255, 255, 0.39) 60%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      transform: translateX(-100%);
+      animation: shimmer 1.5s infinite;
+    }
+  }
+
+  .skeleton-header {
+    margin-bottom: 20px;
+
+    .skeleton-title {
+      width: 100%;
+      height: 25px;
+      margin-bottom: 12px;
    }

-    .skeleton-header {
-        margin-bottom: 20px;
-
-        .skeleton-title {
-            width: 100%;
-            height: 25px;
-            margin-bottom: 12px;
-        }
-
-        .skeleton-subtitle {
-            width: 100%;
-            height: 4px;
-        }
+    .skeleton-subtitle {
+      width: 100%;
+      height: 4px;
    }
+  }

-    .skeleton-content {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
+  .skeleton-content {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;

-        .skeleton-card {
-            width: 100%;
-            height: 15px;
-        }
+    .skeleton-card {
+      width: 100%;
+      height: 15px;
    }
+  }
+}
+
+.asset-category-title{
+  width: 60%;
+  height: 12px;
+  margin-bottom: 12px;
+  margin-top: 4px;
+}
+.skeleton-content-asset{
+  display: flex;
+  height: calc(95px * 2 + 10px);
+  gap: 10px;
+  flex-wrap: wrap;
+  .skeleton-content {
+    gap: 8px;
+    flex-direction: column;
+    min-width: 122px;
+    min-height: 95px;
+    .asset-name {
+      width: 40%;
+      height: 10px;
+    }
+    .asset {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+    }
+  }
 }

@keyframes shimmer {
-    100% {
-        transform: translateX(100%);
-    }
-}
+  100% {
+    transform: translateX(100%);
+  }
+}
--- a/app/src/types/world/worldConstants.ts
+++ b/app/src/types/world/worldConstants.ts
@@ -326,7 +326,7 @@ export const lineConfig: LineConfig = {
 };

 export const wallConfig: WallConfig = {
-  defaultColor: "white", // Default color of the walls
+  defaultColor: "#f2f2f2", // Default color of the walls
  height: 7, // Height of the walls
  width: 0.05, // Width of the walls
 };
@@ -334,7 +334,7 @@ export const wallConfig: WallConfig = {
 export const floorConfig: FloorConfig = {
  defaultColor: "grey", // Default color of the floors
  height: 0.1, // Height of the floors
-  textureScale: 0.1, // Scale of the floor texture
+  textureScale: 1, // Scale of the floor texture
 };

 export const roofConfig: RoofConfig = {
@@ -345,7 +345,7 @@ export const roofConfig: RoofConfig = {
 export const aisleConfig: AisleConfig = {
  width: 0.1, // Width of the aisles
  height: 0.01, // Height of the aisles
-  defaultColor: 0xffff00, // Default color of the aisles
+  defaultColor: 0xE2AC09, // Default color of the aisles
 };

 export const zoneConfig: ZoneConfig = {
--- a/app/src/utils/shortcutkeys/handleShortcutKeys.ts
+++ b/app/src/utils/shortcutkeys/handleShortcutKeys.ts
@@ -17,7 +17,7 @@ import { useSelectedZoneStore } from "../../store/visualization/useZoneStore";
 const KeyPressListener: React.FC = () => {
    const { activeModule, setActiveModule } = useModuleStore();
    const { setActiveSubTool } = useActiveSubTool();
-    const { toggleUI, setToggleUI } = useToggleStore();
+    const { toggleUILeft, toggleUIRight, setToggleUI } = useToggleStore();
    const { setToggleThreeD } = useThreeDStore();
    const { setToolMode } = useToolMode();
    const { setIsPlaying } = usePlayButtonStore();
@@ -26,7 +26,7 @@ const KeyPressListener: React.FC = () => {
    const { setAddAction } = useAddAction();
    const { setSelectedWallItem } = useSelectedWallItem();
    const { setActiveTool } = useActiveTool();
-    const { clearSelectedZone} = useSelectedZoneStore();
+    const { clearSelectedZone } = useSelectedZoneStore();

    const isTextInput = (element: Element | null): boolean =>
        element instanceof HTMLInputElement ||
@@ -42,9 +42,10 @@ const KeyPressListener: React.FC = () => {
        };
        const module = modules[keyCombination];
        if (module && !toggleView) {
+            console.log("hi");
            setActiveTool("cursor");
            setActiveSubTool("cursor");
-            if (module === "market") setToggleUI(false);
+            if (module === "market") setToggleUI(false, false);
            setActiveModule(module);
        }
    };
@@ -69,6 +70,7 @@ const KeyPressListener: React.FC = () => {
            const toggleTo2D = toggleView;
            setToggleView(!toggleTo2D);
            setToggleThreeD(toggleTo2D);
+            setToggleUI(toggleTo2D, toggleTo2D);
            if (toggleTo2D) {
                setSelectedWallItem(null);
                setDeleteTool(false);
@@ -105,6 +107,29 @@ const KeyPressListener: React.FC = () => {
    };


+    const handleSidebarShortcuts = (key: string) => {
+        if (activeModule !== "market") {
+            if (key === "Ctrl+\\") {
+                if (toggleUILeft === toggleUIRight) {
+                    setToggleUI(!toggleUILeft, !toggleUIRight);
+                }
+                else {
+                    setToggleUI(true, true);
+                }
+                return;
+            }
+            if (key === "Ctrl+]") {
+                    setToggleUI(toggleUILeft, !toggleUIRight);
+                    return;
+            }
+            if (key === "Ctrl+[") {
+                    setToggleUI(!toggleUILeft, toggleUIRight);
+                    return;
+            }
+        }
+    }
+
+
    const handleKeyPress = (event: KeyboardEvent) => {
        if (isTextInput(document.activeElement)) return;

@@ -113,11 +138,8 @@ const KeyPressListener: React.FC = () => {

        event.preventDefault();

-        if (keyCombination === "Ctrl+\\") {
-            if (activeModule !== "market") setToggleUI(!toggleUI);
-            return;
-        }
-
+        // Shortcuts specific for sidebar visibility toggle and others specific to sidebar if added
+        handleSidebarShortcuts(keyCombination);
        // Active module selection (builder, simulation, etc.)
        handleModuleSwitch(keyCombination);
        // Common editing tools: cursor | delete | free-hand
@@ -132,6 +154,7 @@ const KeyPressListener: React.FC = () => {

        if (keyCombination === "ESCAPE") {
            setActiveTool("cursor");
+            setActiveSubTool("cursor");
            setIsPlaying(false);
            clearSelectedZone();
        }
@@ -146,7 +169,7 @@ const KeyPressListener: React.FC = () => {
        window.addEventListener("keydown", handleKeyPress);
        return () => window.removeEventListener("keydown", handleKeyPress);
        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeModule, toggleUI, toggleView]);
+    }, [activeModule, toggleUIRight, toggleUILeft, toggleView]);

    return null;
 };
--- a/app/src/utils/theme.ts
+++ b/app/src/utils/theme.ts
@@ -4,7 +4,7 @@ export { };
 function setTheme() {
    const savedTheme: string | null = localStorage.getItem('theme');
    const systemPrefersDark: boolean = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const defaultTheme: string = savedTheme || (systemPrefersDark ? 'dark' : 'light');
+    const defaultTheme: string = savedTheme ?? (systemPrefersDark ? 'dark' : 'light');
    document.documentElement.setAttribute('data-theme', defaultTheme);
    localStorage.setItem('theme', defaultTheme);
 }