File Manager

✏️ Edit File: /home/samridhistore.com/public_html/member/genealogy_tree.php

<?php
session_start();
if (!isset($_SESSION['member_logged_in']) || $_SESSION['member_logged_in'] !== true) {
    header('Location: login.php');
    exit;
}

include '../config.php';

// Get member details
$stmt = $conn->prepare("SELECT * FROM members WHERE member_id = ?");
$stmt->bind_param("s", $_SESSION['member_id']);
$stmt->execute();
$member_result = $stmt->get_result();
$member = $member_result->fetch_assoc();

if (!$member) {
    header('Location: logout.php');
    exit;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Genealogy Tree - Samridhi Store</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../assets/mobile_sidebar.css">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .sidebar {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            min-height: 100vh;
            padding-top: 20px;
        }
        .main-content {
            padding: 20px;
        }
        .nav-link {
            color: rgba(255,255,255,0.8);
            margin: 5px 0;
            border-radius: 5px;
            padding: 10px 15px;
        }
        .nav-link:hover, .nav-link.active {
            color: white;
            background-color: rgba(255,255,255,0.1);
        }
        
        /* Genealogy Tree CSS */
        .genealogy-scroll {
            min-width: 100%;
            overflow-x: auto;
            padding: 20px;
            text-align: center;
        }
        .genealogy-tree {
            display: inline-table; 
            margin: 0 auto;
        }
        .genealogy-tree ul {
            padding-top: 20px; 
            position: relative;
            transition: all 0.5s;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
            display: flex;
            justify-content: center;
        }
        .genealogy-tree li {
            float: left; text-align: center;
            list-style-type: none;
            position: relative;
            padding: 20px 5px 0 5px;
            transition: all 0.5s;
            -webkit-transition: all 0.5s;
            -moz-transition: all 0.5s;
        }
        /* Connectors */
        .genealogy-tree li::before, .genealogy-tree li::after{
            content: '';
            position: absolute; top: 0; right: 50%;
            border-top: 2px solid #ccc;
            width: 50%; height: 20px;
        }
        .genealogy-tree li::after{
            right: auto; left: 50%;
            border-left: 2px solid #ccc;
        }
        .genealogy-tree li:only-child::after, .genealogy-tree li:only-child::before {
            display: none;
        }
        .genealogy-tree li:only-child{ 
            padding-top: 0;
        }
        .genealogy-tree li:first-child::before, .genealogy-tree li:last-child::after{
            border: 0 none;
        }
        .genealogy-tree li:last-child::before{
            border-right: 2px solid #ccc;
            border-radius: 0 5px 0 0;
            -webkit-border-radius: 0 5px 0 0;
            -moz-border-radius: 0 5px 0 0;
        }
        .genealogy-tree li:first-child::after{
            border-radius: 5px 0 0 0;
            -webkit-border-radius: 5px 0 0 0;
            -moz-border-radius: 5px 0 0 0;
        }
        .genealogy-tree ul ul::before{
            content: '';
            position: absolute; top: 0; left: 50%;
            border-left: 2px solid #ccc;
            width: 0; height: 20px;
        }
        /* Nodes */
        .member-view-box {
            display: inline-block;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 10px;
            background-color: #fff;
            min-width: 120px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            z-index: 10;
            position: relative;
            transition: all 0.3s;
            cursor: default; /* Default cursor */
        }
        .member-view-box.has-children {
            cursor: pointer; /* Pointer for expandable nodes */
        }
        .member-view-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        /* Expand/Collapse Toggle */
        .toggle-icon {
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #333;
            z-index: 11;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
            transition: all 0.2s;
        }
        .toggle-icon:hover {
            background-color: #0d6efd;
            color: #fff;
            border-color: #0d6efd;
        }
        
        .member-image {
            width: 50px;
            height: 50px;
            margin: 0 auto 5px auto;
            overflow: hidden;
            background: #f0f0f0;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
        }
        
        .active-node { 
            border: 2px solid #28a745; 
            background-color: #e8f5e9;
        }
        .inactive-node { 
            border: 2px solid #dc3545; 
            background-color: #f8d7da;
        }
        
        .member-image-active {
            background-color: #28a745 !important;
            color: white !important;
        }
        .member-image-inactive {
            background-color: #dc3545 !important;
            color: white !important;
        }
        
        .member-details h6 {
            font-size: 0.9rem;
            margin-bottom: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 150px;
        }
        .member-details span {
            font-size: 0.75rem;
            display: block;
            color: #666;
        }
        
        /* Hidden Children */
        .children-hidden {
            display: none !important;
        }
        
        /* Zoom functionality */
        #tree-container {
            transform-origin: center top;
            transition: transform 0.3s ease;
        }
        .zoom-controls {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            
            <div class="col-md-3 col-lg-2 sidebar d-none d-md-block">
                <div class="text-center mb-4">
                    <h4>Samridhi Store</h4>
                    <p>Member Panel</p>
                </div>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link" href="dashboard.php">
                            <i class="bi bi-speedometer2 me-2"></i> Dashboard
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="profile.php">
                            <i class="bi bi-person me-2"></i> My Profile
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="wallet.php">
                            <i class="bi bi-wallet2 me-2"></i> Wallet
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="team.php">
                            <i class="bi bi-people me-2"></i> My Team
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="genealogy_tree.php">
                            <i class="bi bi-diagram-3 me-2"></i> Genealogy Tree
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="commissions.php">
                            <i class="bi bi-currency-exchange me-2"></i> Commissions
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="withdraw.php">
                            <i class="bi bi-cash me-2"></i> Withdraw
                        </a>
                    </li>
                    <li class="nav-item mt-4">
                        <a class="nav-link" href="logout.php">
                            <i class="bi bi-box-arrow-right me-2"></i> Logout
                        </a>
                    </li>
                </ul>
            </div>
            
            
            <div class="col-md-9 col-lg-10 main-content">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="d-flex align-items-center">
                        <button class="sidebar-toggle me-2" id="sidebarToggle">
                            <i class="bi bi-list"></i>
                        </button>
                        <h2>Genealogy Tree</h2>
                    </div>
                    <div>
                        <button class="btn btn-primary btn-sm me-2" onclick="location.reload();"><i class="bi bi-arrow-clockwise"></i> Refresh</button>
                        <span>Welcome, <?php echo htmlspecialchars($member['name']); ?>!</span>
                    </div>
                </div>
                
                <div class="alert alert-info border-0 shadow-sm">
                    <i class="bi bi-info-circle-fill me-2"></i> <strong>Tip:</strong> Click on any member box with a <i class="bi bi-plus-circle"></i> icon to expand and view their downline.
                </div>
                
                <div class="card mb-4" style="min-height: 80vh;">
                    <div class="card-header bg-white">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5>Team Structure</h5>
                            <div class="legend">
                                <span class="badge bg-success me-2">Active</span>
                                <span class="badge bg-danger">Inactive</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body" style="overflow: hidden; position: relative;">
                        <div class="genealogy-scroll" style="height: 100%; overflow: auto;">
                            <div id="tree-container">
                                <div class="genealogy-tree">
                                    <ul>
                                        <?php
                                        function buildTree($conn, $member_id, $current_depth, $max_depth) {
                                            if ($max_depth > 0 && $current_depth > $max_depth) return;
                                            
                                            // Get member info
                                            $stmt = $conn->prepare("SELECT member_id, name, status, rank FROM members WHERE member_id = ?");
                                            $stmt->bind_param("s", $member_id);
                                            $stmt->execute();
                                            $result = $stmt->get_result();
                                            
                                            
                                            if ($result->num_rows > 0) {
                                                $node = $result->fetch_assoc();
                                                
                                                // Check if member has children first to decide on classes
                                                $child_stmt = $conn->prepare("SELECT member_id FROM members WHERE sponsor_id = ? ORDER BY join_date ASC");
                                                $child_stmt->bind_param("s", $member_id);
                                                $child_stmt->execute();
                                                $children = $child_stmt->get_result();
                                                $has_children = $children->num_rows > 0;
                                                
                                                $statusClass = ($node['status'] == 'active') ? 'active-node' : 'inactive-node';
                                                $imgClass = ($node['status'] == 'active') ? 'member-image-active' : 'member-image-inactive';
                                                $icon = ($node['status'] == 'active') ? 'bi-person-check-fill' : 'bi-person-x-fill';
                                                
                                                // Make name shorter
                                                $display_name = (strlen($node['name']) > 15) ? substr($node['name'], 0, 12) . '..' : $node['name'];
                                                
                                                echo '<li>';
                                                
                                                // Add clickable class if has children
                                                $clickableClass = $has_children ? 'has-children' : '';
                                                $onclick = $has_children ? 'onclick="toggleNode(this)"' : '';
                                                
                                                echo '<div class="member-view-box ' . $statusClass . ' ' . $clickableClass . '" ' . $onclick . ' title="' . htmlspecialchars($node['name']) . ' (' . ucfirst($node['status']) . ')">';
                                                echo '<div class="member-image ' . $imgClass . '"><i class="bi ' . $icon . '"></i></div>';
                                                echo '<div class="member-details">';
                                                echo '<h6>' . htmlspecialchars($display_name) . '</h6>';
                                                echo '<span>ID: ' . htmlspecialchars($node['member_id']) . '</span>';
                                                echo '<span class="badge bg-light text-dark border">' . ucfirst($node['rank']) . '</span>';
                                                echo '</div>';
                                                
                                                // Add toggle icon if children exist
                                                if ($has_children) {
                                                    // Display minus for expanded (default visible levels), plus for collapsed
                                                    // Here we default to collapsed for levels > 2 for strictly "click to expand" feel
                                                    // But logic below sets ul class.
                                                    // Let's rely on JS to set initial icon based on ul visibility.
                                                    echo '<div class="toggle-icon"><i class="bi bi-plus-lg"></i></div>';
                                                }
                                                
                                                echo '</div>';
                                                
                                                // Get children
                                                if (($max_depth == 0 || $current_depth < $max_depth) && $has_children) {
                                                    // Hide children by default for anything deeper than level 1 (only show immediate children of logged in user?)
                                                    // Request was "click karane per expand ho" (expand on click).
                                                    // So user wants to start collapsed or partially collapsed.
                                                    // Let's show Level 1 (direct referrals) expanded, and their children collapsed.
                                                    
                                                    // If current_depth is 1 (Root User), show children (Level 2).
                                                    // If current_depth is 2 (Level 2 User), hide their children (Level 3).
                                                    
                                                    $hiddenClass = ($current_depth >= 2) ? 'children-hidden' : '';
                                                    
                                                    echo '<ul class="' . $hiddenClass . '">';
                                                    while ($child = $children->fetch_assoc()) {
                                                        buildTree($conn, $child['member_id'], $current_depth + 1, $max_depth);
                                                    }
                                                    echo '</ul>';
                                                }
                                                echo '</li>';
                                            }
                                        }
                                        
                                        // Start building tree from current user - 0 means unlimited depth
                                        buildTree($conn, $member['member_id'], 1, 0);
                                        ?>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    
    <div class="zoom-controls btn-group-vertical">
        <button class="btn btn-light border shadow-sm" onclick="zoomIn()"><i class="bi bi-plus-lg"></i></button>
        <button class="btn btn-light border shadow-sm" onclick="resetZoom()"><i class="bi bi-arrows-fullscreen"></i></button>
        <button class="btn btn-light border shadow-sm" onclick="zoomOut()"><i class="bi bi-dash-lg"></i></button>
    </div>
    
    
    <?php include 'mobile_sidebar.php'; ?>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('sidebarToggle').addEventListener('click', function() {
            document.querySelector('.sidebar').classList.toggle('d-none');
        });
        
        // Tree Toggle Logic
        function toggleNode(element) {
            // Find the next sibling UL
            const parentLi = element.parentNode;
            const childUl = parentLi.querySelector('ul');
            const toggleIcon = element.querySelector('.toggle-icon i');
            
            if (childUl) {
                if (childUl.classList.contains('children-hidden')) {
                    // Expand
                    childUl.classList.remove('children-hidden');
                    if (toggleIcon) {
                        toggleIcon.classList.remove('bi-plus-lg');
                        toggleIcon.classList.add('bi-dash-lg');
                    }
                } else {
                    // Collapse
                    childUl.classList.add('children-hidden');
                    if (toggleIcon) {
                        toggleIcon.classList.remove('bi-dash-lg');
                        toggleIcon.classList.add('bi-plus-lg');
                    }
                }
            }
        }
        
        // Initialize Icons based on initial visibility
        document.addEventListener('DOMContentLoaded', function() {
            const nodes = document.querySelectorAll('.member-view-box.has-children');
            nodes.forEach(node => {
                const parentLi = node.parentNode;
                const childUl = parentLi.querySelector('ul');
                const toggleIcon = node.querySelector('.toggle-icon i');
                
                if (childUl && toggleIcon) {
                    if (!childUl.classList.contains('children-hidden')) {
                        // Inherently visible (Level 2), set to Dash
                        toggleIcon.classList.remove('bi-plus-lg');
                        toggleIcon.classList.add('bi-dash-lg');
                    }
                }
            });
        });
        
        // Zoom Logic
        let currentZoom = 1;
        const treeContainer = document.getElementById('tree-container');
        
        function zoomIn() {
            currentZoom += 0.1;
            updateZoom();
        }
        
        function zoomOut() {
            if (currentZoom > 0.2) {
                currentZoom -= 0.1;
                updateZoom();
            }
        }
        
        function resetZoom() {
            currentZoom = 1;
            updateZoom();
        }
        
        function updateZoom() {
            treeContainer.style.transform = `scale(${currentZoom})`;
            // Adjust width to allow scrolling when zoomed in
            if(currentZoom > 1) {
                treeContainer.style.width = `${currentZoom * 100}%`;
            } else {
                treeContainer.style.width = '100%';
            }
        }
    </script>
</body>
</html>

Batal

⬅ Naik ke public_html 24 item

Nama	Tipe	Ukuran	Diubah	Aksi
🐘1register.php	php	12.3 KB	2025-10-10 01:29	✏️ Edit 👁️ View
🐘1register_process.php	php	7.6 KB	2025-10-17 18:30	✏️ Edit 👁️ View
🐘1wallet.php	php	10.8 KB	2025-10-10 01:12	✏️ Edit 👁️ View
🐘2register_process.php	php	8.1 KB	2026-01-23 08:08	✏️ Edit 👁️ View
🐘auth.php	php	1.1 KB	2025-10-10 01:11	✏️ Edit 👁️ View
🐘check_sponsor.php	php	1.3 KB	2026-01-19 15:01	✏️ Edit 👁️ View
🐘commissions.php	php	12.6 KB	2026-01-06 09:55	✏️ Edit 👁️ View
🐘dashboard.php	php	16.1 KB	2026-01-06 10:00	✏️ Edit 👁️ View
📄dashboard.php.bak	bak	9.5 KB	2025-10-10 00:48	✏️ Edit 👁️ View
🐘forgot_password.php	php	8.2 KB	2025-10-17 22:58	✏️ Edit 👁️ View
🐘genealogy_tree.php	php	21.5 KB	2026-01-06 09:37	✏️ Edit 👁️ View
🐘header.php	php	355 B	2025-10-22 07:03	✏️ Edit 👁️ View
🐘login.php	php	6.9 KB	2025-10-17 23:00	✏️ Edit 👁️ View
🐘logout.php	php	86 B	2025-10-09 22:03	✏️ Edit 👁️ View
🐘mobile_sidebar.php	php	3 KB	2026-01-06 09:07	✏️ Edit 👁️ View
🐘profile.php	php	13.1 KB	2025-10-23 14:16	✏️ Edit 👁️ View
🐘register.php	php	14.2 KB	2026-01-23 08:01	✏️ Edit 👁️ View
🐘register_process.php	php	8.5 KB	2026-01-25 12:28	✏️ Edit 👁️ View
🐘registration_success.php	php	6.9 KB	2025-10-24 15:06	✏️ Edit 👁️ View
🐘reset_password.php	php	8.6 KB	2025-10-17 22:59	✏️ Edit 👁️ View
🐘team.php	php	17.1 KB	2026-01-06 09:51	✏️ Edit 👁️ View
🐘transfer_to_franchise.php	php	15.4 KB	2025-10-24 14:52	✏️ Edit 👁️ View
🐘wallet.php	php	11.5 KB	2025-10-24 14:46	✏️ Edit 👁️ View
🐘withdraw.php	php	14 KB	2025-10-10 01:13	✏️ Edit 👁️ View