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

app/src/components/layout/Dashboard/DashboardCard.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { KebabIcon } from "../../icons/ExportCommonIcons";
+import img from "../../../assets/image/image.png"
+
+const DashboardCard:React.FC = () => {
+  return (
+    <div className="dashboard-card-container">
+      <div className="preview-container">
+        <img src={img} alt="" />
+      </div>
+      <div className="project-details-container">
+        <div className="project-details">
+          <div className="project-name">Untitled</div>
+          <div className="project-data">24-12-2025</div>
+        </div>
+        <div className="users-list-container">
+          <div className="user-profile">V</div>
+          <KebabIcon />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardCard;

app/src/components/layout/Dashboard/DashboardHome.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import DashboardCard from "./DashboardCard";
+import DashboardNavBar from "./DashboardNavBar";
+import MarketPlaceBanner from "./MarketPlaceBanner";
+
+const DashboardHome: React.FC = () => {
+  return (
+    <div className="dashboard-home-container">
+      <DashboardNavBar page={"home"} />
+      <MarketPlaceBanner />
+      <div className="container">
+        <div className="header">Recents</div>
+        <div className="cards-container">
+          <DashboardCard />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardHome;

app/src/components/layout/Dashboard/DashboardNavBar.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { CartIcon } from "../../icons/ExportModuleIcons";
+import Search from "../../ui/inputs/Search";
+
+interface DashboardNavBarProps {
+  page: React.ReactNode;
+}
+
+const DashboardNavBar: React.FC<DashboardNavBarProps> = ({ page }) => {
+  return (
+    <div className="dashboard-navbar-container">
+      <div className="title">{page}</div>
+      <div className="market-place-button">
+        <CartIcon isActive /> Market Place
+      </div>
+      <Search onChange={() => {}} />
+    </div>
+  );
+};
+
+export default DashboardNavBar;

app/src/components/layout/Dashboard/MarketPlaceBanner.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import banner from "../../../assets/image/banner.png";
+
+const MarketPlaceBanner = () => {
+  return (
+    <div className="market-place-banner-container">
+      {/* market place banner */}
+      <img src={banner} alt="" />
+      <div className="hero-text">
+        NEW
+        <br /> FALL
+        <br /> COLLECTION
+      </div>
+      <div className="context">Unlock Creativity with Premium 3D Assets!</div>
+      <div className="arrow-context">
+        <svg
+          width="169"
+          height="120"
+          viewBox="0 0 169 120"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
+            stroke="white"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
+            stroke="white"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </div>
+      <div className="explore-button">Explore Now</div>
+    </div>
+  );
+};
+
+export default MarketPlaceBanner;

app/src/components/layout/Dashboard/SidePannel.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import {
+  DocumentationIcon,
+  HelpIcon,
+  HomeIcon,
+  LogoutIcon,
+  NotificationIcon,
+  ProjectsIcon,
+  TutorialsIcon,
+} from "../../icons/DashboardIcon";
+import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";
+
+const SidePannel: React.FC = () => {
+  const userName = localStorage.getItem("userName") || "Anonymous";
+  return (
+    <div className="side-pannel-container">
+      <div className="side-pannel-header">
+        <div className="user-container">
+          <div className="user-profile">{userName[0]}</div>
+          <div className="user-name">{userName}</div>
+        </div>
+        <div className="notifications-container">
+          <NotificationIcon />
+        </div>
+      </div>
+      <div className="new-project-button">+ New project</div>
+      <div className="side-bar-content-container">
+        <div className="side-bar-options-container">
+          <div className="option-list active">
+            <HomeIcon />
+            Home
+          </div>
+          <div className="option-list" title="coming soon">
+            <ProjectsIcon />
+            Projects
+          </div>
+          <div className="option-list" title="coming soon">
+            <TrashIcon />
+            Trash
+          </div>
+          <div className="option-list" title="coming soon">
+            <TutorialsIcon />
+            Tutorials
+          </div>
+          <div className="option-list" title="coming soon">
+            <DocumentationIcon />
+            Documentation
+          </div>
+        </div>
+        <div className="side-bar-options-container" title="coming soon">
+          <div className="option-list">
+            <SettingsIcon />
+            Settings
+          </div>
+          <div className="option-list" style={{cursor: "pointer"}}>
+            <LogoutIcon />
+            Log out
+          </div>
+          <div className="option-list">
+            <HelpIcon />
+            Help & Feedback
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SidePannel;

app/src/components/layout/sidebarLeft/visualization/Templates.tsx

@@ -5,7 +5,6 @@ const Templates = () => {
   const { templates, removeTemplate } = useTemplateStore();
   const { setSelectedZone } = useSelectedZoneStore();
 
-  console.log("templates: ", templates);
   const handleDeleteTemplate = (id: string) => {
     removeTemplate(id);
   };

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

@@ -1,9 +1,10 @@
-import React, { useEffect } from "react";
+import React, { useState } from "react";
 import { AppDockIcon } from "../../icons/HeaderIcons";
 import orgImg from "../../../assets/orgTemp.png";
 import { useActiveUsers } from "../../../store/store";
 import { getAvatarColor } from "../../../modules/collaboration/users/functions/getAvatarColor";
 import { ActiveUser } from "../../../types/users";
+import CollaborationPopup from "../../templates/CollaborationPopup";
 
 const Header: React.FC = () => {
   const { activeUsers } = useActiveUsers();
@@ -12,47 +13,60 @@ const Header: React.FC = () => {
   const guestUsers: ActiveUser[] = activeUsers.filter(
     (user: ActiveUser) => user.userName !== userName
   );
-  console.log('guestUsers: ', guestUsers);
+
+  const [userManagement, setUserManagement] = useState(false);
 
   return (
-    <div className="header-container">
-      <div className="options-container">
-        <div className="share-button">Share</div>
-        <div className="app-docker-button">
-          <AppDockIcon />
-        </div>
-      </div>
-      <div className="split"></div>
-      <div className="users-container">
-        <div className="guest-users-container">
-          {guestUsers.length > 3 && (
-            <div className="other-guest">+{guestUsers.length - 3}</div>
-          )}
-          {guestUsers.slice(0, 3).map((user, index) => (
-            <>
-              <div
-                key={index}
-                className="user-profile"
-                style={{ background: getAvatarColor(index) }}
-              >
-                {user.userName[0]}
-              </div>
-            </>
-          ))}
-        </div>
-        <div className="user-profile-container">
+    <>
+      {userManagement && (
+        <CollaborationPopup setUserManagement={setUserManagement} />
+      )}
+      <div className="header-container">
+        <div className="options-container">
           <div
-            className="user-profile"
-            style={{ background: "var(--accent-color)" }}
+            className="share-button"
+            onClick={() => {
+              setUserManagement(true);
+            }}
           >
-            {userName[0]}
+            Share
           </div>
-          <div className="user-organization">
-            <img src={orgImg} alt="" />
+          <div className="app-docker-button">
+            <AppDockIcon />
+          </div>
+        </div>
+        <div className="split"></div>
+        <div className="users-container">
+          <div className="guest-users-container">
+            {guestUsers.length > 3 && (
+              <div className="other-guest">+{guestUsers.length - 3}</div>
+            )}
+            {guestUsers.slice(0, 3).map((user, index) => (
+              <>
+                <div
+                  key={index}
+                  className="user-profile"
+                  style={{ background: getAvatarColor(index) }}
+                >
+                  {user.userName[0]}
+                </div>
+              </>
+            ))}
+          </div>
+          <div className="user-profile-container">
+            <div
+              className="user-profile"
+              style={{ background: "var(--accent-color)" }}
+            >
+              {userName[0]}
+            </div>
+            <div className="user-organization">
+              <img src={orgImg} alt="" />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };