React Treeviews Test

buildtime/client/logical-editor/package.json

@@ -10,9 +10,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@tailwindcss/vite": "^4.3.3",
     "react": "^19.2.7",
+    "react-arborist": "^3.16.0",
     "react-dom": "^19.2.7",
-    "react-router": "^8.3.0"
+    "react-router": "^8.3.0",
+    "tailwindcss": "^4.3.3"
   },
   "devDependencies": {
     "@types/react": "^19.2.17",

buildtime/client/logical-editor/src/App.css

@@ -89,6 +89,11 @@
   height: 1vh;
 }
 
+.side-links {
+  font-size: 12px;
+  background: whitesmoke;
+}
+
 footer {
   padding: 16px;
   color: gray;

buildtime/client/logical-editor/src/App.jsx

@@ -4,6 +4,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router'
 import Layout from './Layout.jsx'
 import HomePage from './pages/HomePage.jsx'
 import LanguagePage from './pages/LanguagePage.jsx'
+import PropertyPage from './pages/PropertyPage.jsx'
 import NotFoundPage from './pages/NotFoundPage.jsx'
 
 import './App.css'
@@ -15,6 +16,7 @@ const router = createBrowserRouter([
     children: [
       { index: true, element: <HomePage /> },
       { path: 'language', element: <LanguagePage /> },
+      { path: 'propertypool', element: <PropertyPage /> },
       { path: '*', element: <NotFoundPage /> },
     ],
   },

buildtime/client/logical-editor/src/Layout.jsx

@@ -11,7 +11,7 @@ function Layout() {
       <main>
         <Outlet />
       </main>
-      <footer>My App, 2026</footer>
+      <footer><p>(c) 2026 Dr. Thomas Sindt - Simply CPQ</p></footer>
     </div>
   )
 }

buildtime/client/logical-editor/src/components/NavBar.jsx

@@ -10,6 +10,7 @@ const NavBar = () => {
         </div>
         <div className="nav-links">
             <Link to="/">Home</Link>
+            <Link to="/propertypool">Property Pool</Link>
             <Link to="/language">Language</Link>
         </div>
         <div className="logo-container">

buildtime/client/logical-editor/src/components/PropertySideBar.jsx

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import { useState } from 'react';
+import { Tree } from 'react-arborist';
+import TreeView from './TreeView';  
+
+const PropertySideBar = ({ properties, setUpdate }) => {
+    return (
+        <nav className="sidebar">
+            <div>
+                <h1>Property Pool:</h1>
+            </div>
+            <div className="side-links">
+                <TreeView data={[properties]} setUpdate={setUpdate} />
+            </div>
+            <div className="spacer">...</div>
+        </nav>
+    );
+};
+ 
+export default PropertySideBar;
+

buildtime/client/logical-editor/src/components/TreeView.jsx

@@ -0,0 +1,29 @@
+import {Tree} from 'react-arborist';
+
+const TreeView = ({ data, setUpdate }) => {
+    return (
+        <Tree
+            initialData={data}
+            childrenAccessor="subPropertygroups"
+            width="200px"
+            openByDefault={true}
+        >
+            {Node}
+        </Tree>
+    );
+};
+
+const Node = ({ node, style, dragHandle, tree }) => {
+    console.log(node, tree);
+
+    return (
+        <div className="node-container" style={style} ref={dragHandle} onClick={() => {setUpdate(prev => !prev); node.toggle()}}>
+            {node.isLeaf ? "📄" : node.isOpen ? "📂" : "📁"}
+            {node.data.label}
+        </div>
+    );
+};
+
+export default TreeView;
+
+

buildtime/client/logical-editor/src/pages/PropertyPage.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useState } from 'react'
+import PropertySideBar from '../components/PropertySideBar';    
+import UseFetch from '../components/tools/UseFetch';
+
+const PropertyPage = () => {
+  const { data: properties, isLoading, error } = UseFetch(`http://localhost:8088/propertygroup/1`)
+  const [update, setUpdate] = useState(false)
+
+  if (isLoading) return <p>Loading profile...</p>  
+  if (error) return <p>Error: {error}</p>
+
+  return (
+    <div className="content">
+      <div><PropertySideBar properties={properties} setUpdate={setUpdate} /></div>
+      <div className="main"></div>
+    </div>  
+  );
+};
+    
+export default PropertyPage;
+