Family relations started

app/Http/Controllers/FamilyTreeController.php

+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class FamilyTreeController extends Controller
+{
+    public function index()
+    {
+        $familyTree = [
+            'name' => 'Grandparent',
+            'children' => [
+                [
+                    'name' => 'Parent 1',
+                    'children' => [
+                        ['name' => 'Child 1'],
+                        ['name' => 'Child 2'],
+                    ]
+                ],
+                [
+                    'name' => 'Parent 2',
+                    'children' => [
+                        ['name' => 'Child 3'],
+                    ]
+                ]
+            ]
+        ];
+
+        
+        return view('livewire.search.familyrelations.familytree', ['familyTree' => $familyTree]);
+    }
+}

config/adminlte.php

@@ -419,18 +419,18 @@ return [
                 ],
                 [
                     'text' => 'Family Relations',
-                    'url' => '#',
+                    'url' => 'familytree',
                     'can'=> ['advanceSearch','isAdmin']
                 ],
             ]
         ],
 
-        [
-            'text' => 'Account',
-            'route' => 'account.index',
-            'icon' => 'far fa-fw fa-address-card',
-            'can'=> 'isClient'
-        ],
+        // [
+        //     'text' => 'Account',
+        //     'route' => 'account.index',
+        //     'icon' => 'far fa-fw fa-address-card',
+        //     'can'=> 'isClient'
+        // ],
 
         [
             'text' => 'Billing',

resources/views/livewire/search/familyrelations/familytree.blade.php

+@extends('adminlte::page')
+
+@section('title', 'IPRS | Family Relations')
+
+@section('content_header')
+
+@stop
+
+@section('content')
+
+<div id="family-tree-container" class="p-3 bg-white rounded shadow-sm"></div>
+
+@stop
+
+
+@section('js')
+
+    <script>
+        const treeData = @json($familyTree);
+
+        function renderTree(data, container) {
+            const node = document.createElement('div');
+            node.className = 'tree-node';
+            node.innerHTML = `<div class="node-label">${data.name}</div>`;
+
+            if (data.children && data.children.length > 0) {
+                const childrenContainer = document.createElement('div');
+                childrenContainer.className = 'children';
+                data.children.forEach(child => renderTree(child, childrenContainer));
+                node.appendChild(childrenContainer);
+            }
+
+            container.appendChild(node);
+        }
+
+        document.addEventListener('DOMContentLoaded', function () {
+            const root = document.getElementById('family-tree-container');
+            renderTree(treeData, root);
+        });
+    </script>
+
+@stop
+
+
+@section('css')
+
+    <style>
+        #family-tree-container {
+            display: flex;
+            justify-content: center;
+            margin-top: 20px;
+            font-family: sans-serif;
+        }
+
+        .tree-node {
+            text-align: center;
+            margin: 10px;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 10px;
+        }
+
+        .children {
+            display: flex;
+            justify-content: center;
+            margin-top: 10px;
+        }
+
+        .node-label {
+            font-weight: bold;
+        }
+    </style>
+@stop
+