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

2025-05-22 18:31:27 +05:30
parent 43adb0137a e836c96c23
commit 49d6b242d4
16 changed files with 267 additions and 121 deletions
--- a/app/src/components/icons/ExportCommonIcons.tsx
+++ b/app/src/components/icons/ExportCommonIcons.tsx
@@ -1058,9 +1058,6 @@ export const SaveIcon = () => {
  );
 };

-
-
-
 export const SaveVersionIcon = () => {
  return (
    <svg
@@ -1070,10 +1067,12 @@ export const SaveVersionIcon = () => {
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
-      <foreignObject x="-38.7816" y="-60.596" width="261.775" height="235.114">
-        
-        
-      </foreignObject>
+      <foreignObject
+        x="-38.7816"
+        y="-60.596"
+        width="261.775"
+        height="235.114"
+      ></foreignObject>
      <rect
        data-figma-bg-blur-radius="60.596"
        x="22.4204"
@@ -1226,3 +1225,57 @@ export const SaveVersionIcon = () => {
    </svg>
  );
 };
+
+export const RenameVersionIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.7995 4.19826L18.9416 7.44492C19.8527 7.92654 19.8527 9.23161 18.9416 9.71322L17.8513 10.2896L18.9416 10.8658C19.8527 11.3475 19.8527 12.6526 18.9416 13.1342L17.8513 13.7105L18.9416 14.2868C19.8527 14.7684 19.8527 16.0735 18.9416 16.5551L12.7995 19.8017C12.2995 20.0661 11.701 20.0661 11.2008 19.8017L5.05883 16.5551C4.1477 16.0735 4.14771 14.7684 5.05883 14.2868L6.14911 13.7105L5.05883 13.1342C4.1477 12.6526 4.14771 11.3475 5.05883 10.8658L6.14911 10.2896L5.05883 9.71322C4.14771 9.2316 4.14771 7.92654 5.05883 7.44492L11.2008 4.19826C11.701 3.93391 12.2995 3.93391 12.7995 4.19826ZM16.0212 14.6779L12.7995 16.3808C12.2995 16.6452 11.701 16.6452 11.2008 16.3808L7.97918 14.6779L6.57338 15.421L12.0002 18.2895L17.427 15.421L16.0212 14.6779ZM16.0212 11.2569L12.7995 12.9599C12.3449 13.2002 11.809 13.222 11.3395 13.0254L11.2008 12.9599L7.97918 11.2569L6.57338 12L12.0002 14.8686L17.427 12L16.0212 11.2569ZM12.0002 5.71047L6.57338 8.57907L12.0002 11.4476L17.427 8.57907L12.0002 5.71047Z"
+        fill="var(--text-color)"
+      />
+    </svg>
+  );
+};
+
+export const FinishEditIcon = () => {
+  return (
+    <svg
+      width="61"
+      height="60"
+      viewBox="0 0 61 60"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M30.5 52C18.3688 52 8.5 42.1307 8.5 30C8.5 17.8693 18.3688 8 30.5 8C42.6312 8 52.5 17.8693 52.5 30C52.5 42.1307 42.6312 52 30.5 52Z"
+        fill="#D7EBFF"
+      />
+      <path
+        d="M52.5 30C52.5 17.8693 42.6312 8 30.5 8V52C42.6312 52 52.5 42.1307 52.5 30Z"
+        fill="#C4E2FF"
+      />
+      <path
+        d="M30.4996 49.1281C19.9508 49.1281 11.3691 40.5461 11.3691 29.9977C11.3691 19.4493 19.9508 10.8672 30.4996 10.8672C41.0484 10.8672 49.6301 19.4493 49.6301 29.9977C49.6301 40.546 41.0484 49.1281 30.4996 49.1281Z"
+        fill="#88CC2A"
+      />
+      <path
+        d="M49.6305 29.9977C49.6305 19.4493 41.0488 10.8672 30.5 10.8672V49.128C41.0488 49.1281 49.6305 40.546 49.6305 29.9977Z"
+        fill="#7FB335"
+      />
+      <path
+        d="M28.5872 38.605C27.8529 38.605 27.1187 38.3247 26.5583 37.7642L20.6454 31.8514C19.5244 30.7309 19.5244 28.9141 20.6454 27.7936C21.7664 26.6726 23.5822 26.6726 24.7032 27.7936L28.5872 31.6771L36.7755 23.4892C37.8964 22.3682 39.7123 22.3682 40.8333 23.4892C41.9542 24.6096 41.9542 26.4264 40.8333 27.547L30.6161 37.7642C30.0557 38.3247 29.3214 38.605 28.5872 38.605Z"
+        fill="white"
+      />
+      <path
+        d="M36.7752 23.497L30.5 29.7719V37.8665C30.5374 37.8327 30.5797 37.808 30.6158 37.7719L40.833 27.5547C41.954 26.4342 41.954 24.6174 40.833 23.4969C39.7122 22.376 37.8962 22.376 36.7752 23.497Z"
+        fill="#EDF0F2"
+      />
+    </svg>
+  );
+};
--- a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
+++ b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
@@ -8,18 +8,19 @@ import {
 } from "../../../icons/ExportCommonIcons";
 import RenameInput from "../../../ui/inputs/RenameInput";
 import { useVersionStore } from "../../../../store/builder/store";
+import { generateUniqueId } from "../../../../functions/generateUniqueId";

 const VersionHistory = () => {
  const userName = localStorage.getItem("userName") ?? "Anonymous";
-
-  const { versions, addVersion, setVersions } = useVersionStore();
+  const { versions, addVersion, setVersions, updateVersion } =
+    useVersionStore();
  const [selectedVersion, setSelectedVersion] = useState(
    versions.length > 0 ? versions[0] : null
  );

  const addNewVersion = () => {
    const newVersion = {
-      id: crypto.randomUUID(),
+      id: generateUniqueId(),
      versionLabel: `v${versions.length + 1}.0`,
      versionName: "",
      timestamp: new Date().toLocaleDateString("en-US", {
@@ -33,23 +34,21 @@ const VersionHistory = () => {
    const newVersions = [newVersion, ...versions];
    addVersion(newVersion);
    setSelectedVersion(newVersion);
-    setVersions(newVersions); // bring new one to top
+    setVersions(newVersions);
  };

  const handleSelectVersion = (version: any) => {
    setSelectedVersion(version);
-
-    // Move selected version to top, keep others in same order
    const reordered = [version, ...versions.filter((v) => v.id !== version.id)];
    setVersions(reordered);
  };

-  const handleTimestampChange = (newTimestamp: string, index: number) => {
-    const updated = [...versions];
-    updated[index].timestamp = newTimestamp;
-
-    console.warn("Timestamp updated locally but not persisted in store.");
-    setVersions(updated); // Optional: persist timestamp change
+  const handleVersionNameChange = (newName: string, versionId: string) => {
+    const updated = versions.map((v) =>
+      v.id === versionId ? { ...v, versionName: newName } : v
+    );
+    setVersions(updated);
+    updateVersion(versionId, { versionName: newName });
  };

  return (
@@ -99,28 +98,36 @@ const VersionHistory = () => {
        </div>
      )}

-      {/* Versions List or No Versions Message */}
+      {/* Versions List */}
      <div className="saved-versions-list">
        {versions.length === 0 ? (
          <div className="no-versions-message">No saved versions</div>
        ) : (
-          versions.map((version, index) => (
+          versions.map((version) => (
            <button
              key={version.id}
              className="saved-version"
-              id={`${version.versionName}-${index}`}
              onClick={() => handleSelectVersion(version)}
            >
              <div className="version-name">{version.versionLabel}</div>
              <div className="version-details">
                <div className="details">
                  <span className="timestamp">
-                    <RenameInput
-                      value={version.timestamp}
-                      onRename={(newTimestamp) =>
-                        handleTimestampChange(newTimestamp, index)
-                      }
-                    />
+                    {version.versionName ? (
+                      <RenameInput
+                        value={version.versionName}
+                        onRename={(newName) =>
+                          handleVersionNameChange(newName, version.id)
+                        }
+                      />
+                    ) : (
+                      <RenameInput
+                        value={version.timestamp}
+                        onRename={(newName) =>
+                          handleVersionNameChange(newName, version.id)
+                        }
+                      />
+                    )}
                  </span>
                  <span className="saved-by">
                    <div className="user-profile">{version.savedBy[0]}</div>
--- a/app/src/components/layout/sidebarRight/versionHisory/VersionSaved.tsx
+++ b/app/src/components/layout/sidebarRight/versionHisory/VersionSaved.tsx
@@ -2,10 +2,11 @@ import React, { useState, useEffect, useRef } from "react";
 import { useVersionStore } from "../../../../store/builder/store";
 import {
  CloseIcon,
+  FinishEditIcon,
+  RenameVersionIcon,
  SaveIcon,
  SaveVersionIcon,
 } from "../../../icons/ExportCommonIcons";
-import { RenameIcon } from "../../../icons/ContextMenuIcons";
 import RenderOverlay from "../../../templates/Overlay";

 const VersionSaved = () => {
@@ -15,28 +16,28 @@ const VersionSaved = () => {
  const [showNotification, setShowNotification] = useState(false);
  const [newName, setNewName] = useState("");
  const [description, setDescription] = useState("");
+  const [showEditedFinish, setShowEditedFinish] = useState(false);
+  const [editedVersionName, setEditedVersionName] = useState("");
  const prevVersionCount = useRef(versions.length);
  const dismissTimerRef = useRef<NodeJS.Timeout | null>(null);

  const latestVersion = versions?.[0];

-  // Clear dismiss timer when component unmounts
  useEffect(() => {
    return () => {
      if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
    };
  }, []);

-  // Handle new version notification and setup dismiss timer
  useEffect(() => {
-    if (versions.length > prevVersionCount.current) {
+    if (versions.length > prevVersionCount.current && latestVersion) {
      setShowNotification(true);
      setShouldDismiss(false);
      setIsEditing(false);
-      setNewName(versions[0].versionName ?? "");
-      setDescription(versions[0]?.description ?? "");
+      setNewName(latestVersion.versionName ?? "");
+      setDescription(latestVersion.description ?? "");
+      setEditedVersionName(latestVersion.versionName ?? ""); // Initialize editedVersionName

-      // Only start dismiss timer if not in edit mode
      if (!isEditing) {
        startDismissTimer();
      }
@@ -45,18 +46,15 @@ const VersionSaved = () => {
    } else if (versions.length < prevVersionCount.current) {
      prevVersionCount.current = versions.length;
    }
-  }, [versions, isEditing]);
+  }, [versions, isEditing, latestVersion]);

-  // Start or restart the dismiss timer
  const startDismissTimer = (delay = 5000) => {
    if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
    dismissTimerRef.current = setTimeout(() => {
-      console.log("isEditing: ", isEditing);
      setShouldDismiss(true);
    }, delay);
  };

-  // Hide notification after dismiss animation delay
  useEffect(() => {
    if (shouldDismiss) {
      const timer = setTimeout(() => setShowNotification(false), 200);
@@ -65,11 +63,11 @@ const VersionSaved = () => {
  }, [shouldDismiss]);

  const handleEditName = () => {
-    setIsEditing(true);
-    setNewName(latestVersion?.versionName ?? "");
-    setDescription(latestVersion?.description ?? "");
+    if (!latestVersion) return;

-    // Clear any existing dismiss timer when editing starts
+    setIsEditing(true);
+    setNewName(latestVersion.versionName ?? "");
+    setDescription(latestVersion.description ?? "");
    if (dismissTimerRef.current) {
      clearTimeout(dismissTimerRef.current);
      dismissTimerRef.current = null;
@@ -77,21 +75,29 @@ const VersionSaved = () => {
  };

  const handleFinishEdit = () => {
-    if (latestVersion) {
-      updateVersion(latestVersion.id, {
-        versionName: newName,
-        description,
-      });
-      console.log("saved");
-      startDismissTimer(); // Restart 5s timer after save
-    }
-    startDismissTimer(); // Restart 5s timer after save
+    if (!latestVersion) return;
+
+    const updatedName =
+      (newName.trim() || latestVersion.versionName) ?? latestVersion.timestamp;
+    updateVersion(latestVersion.id, {
+      versionName: updatedName,
+      description,
+    });
+
+    setEditedVersionName(updatedName);
    setIsEditing(false);
+    setShowEditedFinish(true);
+
+    setTimeout(() => {
+      setShowEditedFinish(false);
+    }, 5000);
+
+    startDismissTimer();
  };

  const handleCancel = () => {
    setIsEditing(false);
-    startDismissTimer(); // Restart 5s timer after cancel
+    startDismissTimer();
  };

  const handleClose = () => {
@@ -103,35 +109,39 @@ const VersionSaved = () => {

  return (
    <div className={`versionSaved ${shouldDismiss ? "dismissing" : ""}`}>
-      <div className="version-header">
-        <div className="header-wrapper">
-          <div className="icon">
-            <SaveIcon />
+      {!isEditing && !showEditedFinish && (
+        <div className="versionSaved-wrapper">
+          <div className="version-header">
+            <div className="header-wrapper">
+              <div className="icon">
+                <SaveIcon />
+              </div>
+              <span>Saved New Version</span>
+            </div>
+            <button className="close-btn" onClick={handleClose}>
+              <CloseIcon />
+            </button>
          </div>
-          <span>Saved New Version</span>
-        </div>
-        <button className="close-btn" onClick={handleClose}>
-          <CloseIcon />
-        </button>
-      </div>

-      <div className="version-details">
-        <SaveVersionIcon />
-        <div className="details">
-          <div className="details-wrapper">
-            New Version Created {latestVersion.versionLabel}{" "}
-            {latestVersion.timestamp.toUpperCase()}
+          <div className="version-details">
+            <SaveVersionIcon />
+            <div className="details">
+              <div className="details-wrapper">
+                New Version Created {latestVersion.versionLabel}{" "}
+                {latestVersion.timestamp.toUpperCase()}
+              </div>
+              <button onClick={handleEditName}>Edit name</button>
+            </div>
          </div>
-          <button onClick={handleEditName}>Edit name</button>
        </div>
-      </div>
+      )}

      {isEditing && (
        <RenderOverlay>
          <div className="edit-version-popup-wrapper">
            <div className="details-wrapper-popup-container">
              <div className="header-wrapper">
-                <RenameIcon />
+                <RenameVersionIcon />
                <div className="label">Rename Version</div>
              </div>
              <div className="details-wrapper">
@@ -154,16 +164,11 @@ const VersionSaved = () => {
                  </div>
                </div>
                <div className="version-description">
-                  {/* <input
-                    type="text"
-                    value={description}
-                    onChange={(e) => setDescription(e.target.value)}
-                    placeholder="Add description"
-                  /> */}
                  <textarea
                    value={description}
                    onChange={(e) => setDescription(e.target.value)}
                    placeholder="Add description"
+                    style={{ resize: "none" }}
                  />
                </div>
              </div>
@@ -179,6 +184,22 @@ const VersionSaved = () => {
          </div>
        </RenderOverlay>
      )}
+
+      {showEditedFinish && (
+        <RenderOverlay>
+          <div className="finishEdit-version-popup-wrapper">
+            <div className="finishEdit-wrapper-popup-container">
+              <div className="icon">
+                <FinishEditIcon />
+              </div>
+              <div className="versionname">
+                {editedVersionName || latestVersion.versionName}
+              </div>
+              <div className="success-message">Saved Successfully!</div>
+            </div>
+          </div>
+        </RenderOverlay>
+      )}
    </div>
  );
 };
--- a/app/src/components/layout/sidebarRight/visualization/Visualization.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/Visualization.tsx
@@ -13,7 +13,7 @@ const Visualization = () => {
  return (
    <div className="visualization-right-sideBar">
      <ToggleHeader
-        options={["Data"]}
+        options={["Data","Design"]}
        activeOption={activeOption}
        handleClick={handleToggleClick}
      />
--- a/app/src/components/layout/sidebarRight/visualization/design/Design.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/design/Design.tsx
@@ -53,7 +53,7 @@ const Design = () => {

  // Initialize name input and extract elements when selectedChartId changes
  useEffect(() => {
-    setNameInput(selectedChartId?.header || selectedChartId?.title || "");
+    setNameInput(selectedChartId?.header ? selectedChartId?.title : "");

    if (!chartRef.current) return;

@@ -70,7 +70,7 @@ const Design = () => {
          const tagName = el.tagName.toLowerCase();
          const className =
            typeof el.className === "string" ? el.className : "";
-          const textContent = el.textContent?.trim() || "";
+          const textContent = el.textContent?.trim() ?? "";

          let selector = tagName;

@@ -196,22 +196,22 @@ const Design = () => {
  return (
    <div className="design">
      <div className="selectedWidget">
-        {selectedChartId?.title || selectedChartId?.header || "Widget 1"}
+        {selectedChartId?.title ? selectedChartId?.header : "Widget 1"}
      </div>

      <div className="reviewChart" ref={chartRef}>
        {selectedChartId?.title ? (
          <ChartComponent
-            type={selectedChartId.type || "bar"}
+            type={selectedChartId.type ?? "bar"}
            title={selectedChartId.title}
-            data={selectedChartId.data || defaultChartData}
+            data={selectedChartId.data ?? defaultChartData}
          />
        ) : (
          <SimpleCard
-            header={selectedChartId?.header || ""}
+            header={selectedChartId?.header ?? ""}
            icon={WalletIcon}
-            value={selectedChartId?.value || ""}
-            per={selectedChartId?.per || ""}
+            value={selectedChartId?.value ?? ""}
+            per={selectedChartId?.per ?? ""}
          />
        )}
      </div>
@@ -220,7 +220,7 @@ const Design = () => {
        <div className="option">
          <span>Element to Style</span>
          <RegularDropDown
-            header={selectedElementToStyle || "Select Element"}
+            header={selectedElementToStyle ?? "Select Element"}
            options={
              elementOptions.length > 0
                ? elementOptions.map((opt) => opt.display)
@@ -230,7 +230,7 @@ const Design = () => {
              const selected = elementOptions.find(
                (opt) => opt.display === value
              );
-              setSelectedElementToStyle(selected?.value || null);
+              setSelectedElementToStyle(selected?.value ?? null);
            }}
          />
        </div>
@@ -249,7 +249,7 @@ const Design = () => {
          <div className="option">
            <span>Chart Type</span>
            <RegularDropDown
-              header={selectedChartId?.type || "Select Type"}
+              header={selectedChartId?.type ?? "Select Type"}
              options={["bar", "line", "pie", "doughnut", "radar", "polarArea"]}
              onSelect={(value) => {
                handleUpdateWidget({ type: value });
@@ -261,7 +261,7 @@ const Design = () => {
        <div className="option">
          <span>Font Family</span>
          <RegularDropDown
-            header={selectedChartId?.fontFamily || "Select Font"}
+            header={selectedChartId?.fontFamily ?? "Select Font"}
            options={["Arial", "Roboto", "Sans-serif"]}
            onSelect={(value) => setSelectedFont(value)}
          />
@@ -270,7 +270,7 @@ const Design = () => {
        <div className="option">
          <span>Size</span>
          <RegularDropDown
-            header={selectedChartId?.fontSize || "Select Size"}
+            header={selectedChartId?.fontSize ?? "Select Size"}
            options={["12px", "14px", "16px", "18px"]}
            onSelect={(value) => setSelectedSize(value)}
          />
@@ -279,20 +279,20 @@ const Design = () => {
        <div className="option">
          <span>Weight</span>
          <RegularDropDown
-            header={selectedChartId?.fontWeight || "Select Weight"}
+            header={selectedChartId?.fontWeight ?? "Select Weight"}
            options={["Light", "Regular", "Bold"]}
            onSelect={(value) => setSelectedWeight(value)}
          />
        </div>

        <div className="option">
-          <div
+          <button
            className="header"
            onClick={() => setShowColorPicker((prev) => !prev)}
          >
            <span>Element Color</span>
            <div className="icon">▾</div>
-          </div>
+          </button>

          {showColorPicker && (
            <div className="colorDisplayer">
--- a/app/src/components/ui/compareVersion/CompareLayOut.tsx
+++ b/app/src/components/ui/compareVersion/CompareLayOut.tsx
@@ -8,6 +8,7 @@ import { useSaveVersion } from "../../../store/builder/store";
 import Search from "../inputs/Search";
 import OuterClick from "../../../utils/outerClick";
 import RegularDropDown from "../inputs/RegularDropDown";
+import { useProductStore } from "../../../store/simulation/useProductStore";

 interface Layout {
  id: number;
@@ -18,6 +19,8 @@ interface CompareLayoutProps {
 }

 const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
+  const { products } = useProductStore();
+  console.log('products: ', products);
  const [width, setWidth] = useState("50vw");
  const [isResizing, setIsResizing] = useState(false);
  const [showLayoutDropdown, setShowLayoutDropdown] = useState(false);
@@ -141,17 +144,17 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
                  <div className="header">Layouts</div>
                  <Search onChange={() => {}} />
                  <div className="layouts-container">
-                    {dummyLayouts.map((layout) => (
+                    {products.map((layout) => (
                      <button
-                        key={layout.id}
+                        key={layout.productId}
                        className="layout-wrapper"
                        onClick={() => {
-                          handleSelectLayout(layout.name);
+                          handleSelectLayout(layout.productName);
                          setShowLayoutDropdown(false);
                        }}
                      >
                        <LayoutIcon />
-                        <div className="layout">{layout.name}</div>
+                        <div className="layout">{layout.productName}</div>
                      </button>
                    ))}
                  </div>
@@ -165,7 +168,7 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
          <div className="selectLayout-wrapper">
            <RegularDropDown
              header={selectedLayout}
-              options={dummyLayouts.map((l) => l.name)} // Pass layout names as options
+              options={products.map((l) => l.productName)} // Pass layout names as options
              onSelect={handleSelectLayout}
              search={false}
            />
--- a/app/src/components/ui/inputs/ToggleHeader.tsx
+++ b/app/src/components/ui/inputs/ToggleHeader.tsx
@@ -14,15 +14,15 @@ const ToggleHeader: React.FC<ToggleHeaderProps> = ({
  return (
    <div className="toggle-header-container">
      {options.map((option, index) => (
-        <div
-          key={index}
+        <button
+          key={`${index}-${option}`}
          className={`toggle-header-item ${
            option === activeOption ? "active" : ""
          }`}
          onClick={() => handleClick(option)} // Call handleClick when an option is clicked
        >
          {option}
-        </div>
+        </button>
      ))}
    </div>
  );
--- a/app/src/components/ui/list/DropDownList.tsx
+++ b/app/src/components/ui/list/DropDownList.tsx
@@ -128,7 +128,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
            title="collapse-btn"
            className="collapse-icon option"
            style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
-            onClick={handleToggle}
+            // onClick={handleToggle}
          >
            <ArrowIcon />
          </button>
--- a/app/src/components/ui/log/LogList.tsx
+++ b/app/src/components/ui/log/LogList.tsx
@@ -1,5 +1,5 @@
 // LogList.tsx
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { LogListIcon, CloseIcon } from "../../icons/ExportCommonIcons"; // Adjust path as needed
 import { useLogger } from "./LoggerContext";
 import { GetLogIcon } from "../../footer/getLogIcons";
@@ -17,6 +17,20 @@ const LogList: React.FC = () => {
      ? [...logs].reverse()
      : [...logs].filter((log) => log.type === selectedTab).reverse();

+  useEffect(() => {
+    if (logs.length > 0) {
+      const lastLog = logs[logs.length - 1];
+      const validTypes = ["all", "info", "warning", "error"];
+
+      if (validTypes.includes(lastLog.type)) {
+        console.log("lastLog.type: ", lastLog.type);
+        setSelectedTab(lastLog.type);
+      } else {
+        setSelectedTab("all");
+      }
+    }
+  }, [logs]);
+
  return (
    // eslint-disable-next-line
    <div
--- a/app/src/components/ui/menu/menu.tsx
+++ b/app/src/components/ui/menu/menu.tsx
@@ -7,6 +7,7 @@ import useVersionHistoryStore, {
  useVersionStore,
 } from "../../../store/builder/store";
 import { useSubModuleStore } from "../../../store/useModuleStore";
+import { generateUniqueId } from "../../../functions/generateUniqueId";

 interface MenuBarProps {
  setOpenMenu: (isOpen: boolean) => void;
@@ -69,7 +70,7 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
          const versionCount = versionStore.versions.length;

          const newVersion = {
-            id: crypto.randomUUID(),
+            id: generateUniqueId(),
            versionLabel: `v${versionCount + 1}.0`,
            timestamp: `${new Date().toLocaleTimeString("en-US", {
              hour: "numeric",
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@@ -34,10 +34,11 @@ import Footer from "../components/footer/Footer";
 import SelectFloorPlan from "../components/temporary/SelectFloorPlan";
 import ControlsPlayer from "../components/layout/controls/ControlsPlayer";
 import CompareLayOut from "../components/ui/compareVersion/CompareLayOut";
-import {useToggleStore} from "../store/useUIToggleStore";
+import { useToggleStore } from "../store/useUIToggleStore";
 import RegularDropDown from "../components/ui/inputs/RegularDropDown";
 import VersionSaved from "../components/layout/sidebarRight/versionHisory/VersionSaved";
 import SimulationPlayer from "../components/ui/simulation/simulationPlayer";
+import { useProductStore } from "../store/simulation/useProductStore";
 import ThreadChat from "../components/ui/collaboration/ThreadChat";

 const Project: React.FC = () => {
@@ -53,6 +54,7 @@ const Project: React.FC = () => {
  const { setWallItems } = useWallItems();
  const { setZones } = useZones();
  const { isVersionSaved } = useSaveVersion();
+  const { products } = useProductStore();

  useEffect(() => {
    if (!isVersionSaved) {
@@ -172,7 +174,7 @@ const Project: React.FC = () => {
          <div className="initial-selectLayout-wrapper">
            <RegularDropDown
              header={selectedLayout ?? "Layout 1"}
-              options={dummyLayouts.map((l) => l.name)} // Pass layout names as options
+              options={products.map((l) => l.productName)} // Pass layout names as options
              onSelect={handleSelectLayout}
              search={false}
            />
@@ -181,7 +183,7 @@ const Project: React.FC = () => {
        </>
      )}
      <VersionSaved />
-      <ThreadChat />
+      {/* <ThreadChat /> */}
    </div>
  );
 };
--- a/app/src/store/builder/store.ts
+++ b/app/src/store/builder/store.ts
@@ -548,7 +548,7 @@ interface CompareStore {
 }

 export const useCompareStore = create<CompareStore>((set) => ({
-  comparePopUp: true,
+  comparePopUp: false,
  setComparePopUp: (value) => set({ comparePopUp: value }),
  toggleComparePopUp: () =>
    set((state) => ({ comparePopUp: !state.comparePopUp })),
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -6,6 +6,10 @@
    top: 100px;
    left: 40px;
    z-index: 10;
+
+    .regularDropdown-container {
+        background: var(--background-color);
+    }
 }

 .compareLayOut-wrapper {
@@ -28,6 +32,10 @@
        position: absolute;
        top: 100px;
        right: 40px;
+
+        .regularDropdown-container {
+            background: var(--background-color);
+        }
    }

    .chooseLayout-container {
@@ -158,11 +166,16 @@
                            background-color: var(--highlight-text-color) !important;
                            border-radius: 4px;

+                            .layout {
+                                color: var(--text-button-color) !important;
+
+                            }
+
                            svg {

                                path {

-                                    fill: var(--background-color-accent);
+                                    fill: var(--text-button-color) !important;
                                }
                            }

--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -831,7 +831,7 @@
        gap: 15px;
        padding: 0;
        font-size: var(--font-weight-regular);
-        color: #4a4a4a;
+        color: var(--text-color);

        .reviewChart {
          width: 100%;
@@ -851,7 +851,7 @@
      .reviewChart {
        width: 100%;
        height: 150px;
-        background: #f0f0f0;
+        background: var(--background-color);
        display: flex;
        align-items: center;
      }
@@ -888,6 +888,7 @@
              justify-content: start;
              align-items: center;

+
              input[type="color"] {
                border: none;
                outline: none;
@@ -895,6 +896,7 @@
                width: 24px;
                height: 26px;
                border-radius: #{$border-radius-small};
+                padding: 0;
              }
            }
          }
@@ -1749,14 +1751,18 @@
  bottom: 45px;
  right: 10px;
  z-index: 10;
-  background: var(--background-color);
-  backdrop-filter: blur(20px);
-  border-radius: 20px;
-  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;

+  .versionSaved-wrapper {
+    border-radius: 20px;
+
+    padding: 8px 10px;
+    background: var(--background-color);
+    backdrop-filter: blur(20px);
+  }
+
  .version-header {
    display: flex;
    justify-content: space-between;
@@ -1820,7 +1826,8 @@
  display: none;
 }

-.edit-version-popup-wrapper {
+.edit-version-popup-wrapper,
+.finishEdit-version-popup-wrapper {


  height: 100vh;
@@ -1828,14 +1835,14 @@
  background: var(--background-color-secondary);
  @include flex-center;

-  .details-wrapper-popup-container {
+  .details-wrapper-popup-container,
+  .finishEdit-wrapper-popup-container {
    min-width: 535px;
    width: 520px;
    background: var(--background-color);
    border-radius: #{$border-radius-large};
    backdrop-filter: blur(15px);
    outline: 1px solid var(--border-color);
-    padding: 6px;

    display: flex;
    flex-direction: column;
@@ -1844,6 +1851,7 @@

    .header-wrapper {
      display: flex;
+      align-items: center;
      gap: 6px;
    }

@@ -1912,4 +1920,19 @@
      }
    }
  }
+
+  .finishEdit-wrapper-popup-container {
+    min-height: 250px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+
+    .versionname {
+      font-size: var(--font-size-large);
+      color: var(--background-color-accent);
+      color: #CCACFF;
+      text-transform: capitalize;
+    }
+  }
 }
--- a/app/src/styles/main.scss
+++ b/app/src/styles/main.scss
@@ -45,4 +45,4 @@

 //
@use "./scene/scene";
-@use "./scene/comments";
+@use "./scene/comments";
--- a/app/src/styles/scene/comments.scss
+++ b/app/src/styles/scene/comments.scss
@@ -21,8 +21,10 @@
    display: flex;
    align-items: start;
    flex-direction: column;
+
    .users-commented {
      @include flex-center;
+
      .users {
        height: 24px;
        line-height: 24px;
@@ -31,6 +33,7 @@
        border-radius: 50%;
      }
    }
+
    .last-comment-details {
      display: flex;
      align-items: start;
@@ -40,17 +43,21 @@
      .header {
        @include flex-center;
        gap: 10px;
+
        .user-name {
          text-transform: capitalize;
        }
+
        .time {
          font-size: var(--font-size-small);
          color: var(--input-text-color);
        }
      }
+
      .message {
        margin-top: 10px;
      }
+
      .replies {
        margin-top: 4px;
        font-size: var(--font-size-small);
@@ -63,6 +70,7 @@
        opacity: 0;
      }
    }
+
    .expand {
      min-width: 200px;
      max-width: 260px;
@@ -71,6 +79,7 @@
      height: 100%;
    }
  }
+
  .open {
    .users-commented {
      padding: 12px;