byteshadow

[
    {
        "id": 1,
        "name": "Institutional",
        "description": "Focuses on institutional clients such as pension funds, mutual funds, and insurance companies.",
        "fields": [
            {"item_type_id": 1, "field_id": 1, "field": {"id": 1, "name": "ClientType", "label": "Client Type", "description": "Types of institutional clients", "valueType": "picklistString", "inheritable": False, "mandatory": True, "options": ["Pension funds", "Mutual funds", "Insurance companies"]},},
            {"item_type_id": 1, "field_id": 2, "field":{"id": 2, "name": "AUM", "label": "Assets Under Management", "description": "Gauge the size and potential of the client", "valueType": "decimal", "inheritable": False, "mandatory": True},},
            {"item_type_id": 1, "field_id": 3, "field":{"id": 3, "name": "InvestmentFocus", "label": "Investment Focus", "description": "Focus areas of investment", "valueType": "picklistString", "inheritable": False, "mandatory": True, "options": ["Fixed income", "Equities"

byteshadow

import React, { useState } from 'react';

const DetailsPanel = ({node}) => (
  <div style={{ padding: '10px', border: '1px solid #ccc', margin: '10px', borderRadius: '5px' }}>
    <h3>Details</h3>
    {node ? (
      <div>
        <div><strong>Name:</strong> {node.name}</div>
        <div><strong>ID:</strong> {node.id}</div>
        <div><strong>Parent ID:</strong> {node.parent_id || 'N/A'}</div>

byteshadow

[
    {
        "name": "Securities",
        "subCategories": [
            {
                "name": "Equitysecurities",
                "subCategories": [],
                "products": [
                    {
                        "name": "Commonstocks",