wobblies

Back Back Up Advanced Editor

<?php
include "./include/head.php";
include "sidebar.php";
include "./include/navbar.php";

// ✅ Fetch total commission for this user
$stmt = $conn->prepare("SELECT COALESCE(SUM(amount), 0) AS total_commission FROM commission WHERE user_id = ?");
$stmt->bind_param("s", $userid);
$stmt->execute();
$result = $stmt->get_result();
$data = $result->fetch_assoc();
$total_commission = $data['total_commission'] ?? 0.00;

// ✅ Generate commission trend (simulated)
$commissionHistory = [];
$step = $total_commission / 6;
for ($i = 1; $i <= 6; $i++) {
  $commissionHistory[] = round($step * $i + rand(-3, 3), 2);
}
?>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

/* 🔥 Live Rate Ticker */
.market-ticker {
  background: linear-gradient(90deg, #6a11cb, #2575fc);
  color: white;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 0;
  font-size: 15px;
  top: 0;
  z-index: 999;
}

.market-ticker span {
  display: inline-block;
  padding-right: 100%;
  animation: ticker 25s linear infinite;
}

@keyframes ticker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.dashboard-container {
  padding: 2rem;
}

/* Card Style */
.card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  background: #fff;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}
.stat-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
}

/* Chart Cards */
.chart-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  padding: 30px;
}

/* Activities */
.activity-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.activity-list li {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.activity-list li i {
  font-size: 20px;
  color: #6c63ff;
  margin-right: 10px;
}
.activity-list li span {
  color: #333;
  font-weight: 500;
}
.activity-list li small {
  color: #999;
}
</style>

<div class="dashboard-container">
    
<div class="market-ticker mb-3">
  <span id="liveTicker">Fetching live USD market rates...</span>
</div>

<div class="row g-4 mb-4">
  
  <div class="col-md-3">
    <div class="card p-4">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <p class="text-muted mb-1">Account Balance</p>
          <h5 class="fw-bold">$<?php echo number_format($user['account_balance'], 2); ?></h5>
        </div>
        <div class="stat-circle bg-primary text-white d-flex align-items-center justify-content-center rounded-circle" style="width:50px;height:50px;">
          <i class="fas fa-dollar-sign fa-lg"></i>
        </div>
      </div>
    </div>
  </div>

<div class="col-md-3">
    <div class="card p-4">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <p class="text-muted mb-1">Sales Balance</p>
          <h5 class="fw-bold">$<?php echo number_format($user['total_bonus'], 2); ?></h5>
        </div>
        <div class="stat-circle bg-danger text-white d-flex align-items-center justify-content-center rounded-circle" style="width:50px;height:50px;">
          <i class="fas fa-chart-line fa-lg"></i>
        </div>
      </div>
    </div>
  </div>

<div class="col-md-3">
    <div class="card p-4">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <p class="text-muted mb-1">Profit Balance</p>
          <h5 class="fw-bold">$<?php echo number_format($user['profit_balance'], 2); ?></h5>
        </div>
        <div class="stat-circle bg-success text-white d-flex align-items-center justify-content-center rounded-circle" style="width:50px;height:50px;">
          <i class="fas fa-chart-bar fa-lg"></i>
        </div>
      </div>
    </div>
  </div>

<div class="col-md-3">
    <div class="card p-4">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <p class="text-muted mb-1">Total Withdrawal</p>
          <h5 class="fw-bold">$<?php echo number_format(floatval($user['total_withdrawal'] ?? 0), 2); ?></h5>
        </div>
        <div class="stat-circle bg-warning text-dark d-flex align-items-center justify-content-center rounded-circle" style="width:50px;height:50px;">
          <i class="fas fa-wallet fa-lg"></i>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row g-4 mt-4">
  
  <div class="col-lg-6">
    <div class="chart-card h-100">
      <h5 class="mb-3">Live Market Overview</h5>
      
      <div class="tradingview-widget-container" style="height:300px;">
        <div id="tradingview_widget"></div>
      </div>
      
      <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
      <script type="text/javascript">
        new TradingView.widget({
          "container_id": "tradingview_widget",
          "width": "100%",
          "height": "300",
          "symbol": "EURUSD",
          "interval": "30",
          "timezone": "Etc/UTC",
          "theme": "light",
          "style": "1",
          "locale": "en",
          "toolbar_bg": "#f1f3f6",
          "enable_publishing": false,
          "hide_top_toolbar": true,
          "save_image": false,
          "details": false,
          "hide_legend": false,
        });
      </script>

<div class="mt-3">
        <h6>🌍 Live Exchange Rates (Base: USD)</h6>
        <ul class="list-group small" id="exchangeRates"></ul>
      </div>
    </div>
  </div>

<div class="col-lg-6">
    <div class="chart-card text-center h-100 d-flex flex-column justify-content-center">
      <img src="https://cdn-icons-png.flaticon.com/512/4140/4140048.png" width="90" class="mb-3 mx-auto">
      <h5>Welcome back, <?php echo htmlspecialchars($user['full_name'] ?? ''); ?>!</h5>
      <p class="text-muted mb-3">
        Your dashboard is up-to-date with the latest data insights.
        Stay focused and continue growing your digital earnings!
      </p>
      <div class="progress" style="height: 10px;">
        <div class="progress-bar bg-success" role="progressbar"
             style="width: 75%;" aria-valuenow="75"
             aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <small class="text-muted d-block mt-2">Performance Score: 75%</small>
    </div>
  </div>
</div>

<div class="row g-4">
  
  <div class="col-lg-8">
    <div class="chart-card h-100">
      <div class="text-center mb-4">
        <h5>Commission Trend</h5>
        <p class="text-muted">Visual overview of your commission growth</p>
      </div>
      <canvas id="commissionChart" height="140"></canvas>
      <div class="text-center mt-4">
        <h4 class="fw-bold">$<?php echo number_format($total_commission, 2); ?></h4>
        <p class="text-muted mb-0">Total Commission Earned</p>
      </div>
    </div>
  </div>

<div class="col-lg-4">
    <div class="chart-card h-100">
      <div class="text-center mb-3">
        <h5>Earnings Breakdown</h5>
        <p class="text-muted">Overview of your income sources</p>
      </div>
      <canvas id="earningsPie" height="180"></canvas>
    </div>
  </div>
</div>

<script>
async function fetchExchangeRates() {
  try {
    const res = await fetch('https://api.exchangerate.host/latest?base=USD&symbols=EUR,GBP,NGN,BTC');
    const data = await res.json();
    const rates = data.rates;

// Initial load + auto-refresh every minute
fetchExchangeRates();
setInterval(fetchExchangeRates, 60000);
</script>

<style>
.chart-card {
  background: #fff;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}
.chart-card:hover {
  transform: translateY(-3px);
}
.list-group-item {
  border: none;
  padding: 8px 12px;
}
</style>

<script>
// Chart: Commission Trend
const ctx = document.getElementById('commissionChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    datasets: [{
      data: <?php echo json_encode($commissionHistory); ?>,
      fill: true,
      backgroundColor: 'rgba(102, 126, 234, 0.15)',
      borderColor: '#667eea',
      borderWidth: 3,
      pointRadius: 4,
      pointBackgroundColor: '#764ba2',
      tension: 0.4
    }]
  },
  options: {
    responsive: true,
    scales: { x: { display: false }, y: { beginAtZero: true } },
    plugins: { legend: { display: false } }
  }
});

// Chart: Earnings Pie
new Chart(document.getElementById('earningsPie'), {
  type: 'doughnut',
  data: {
    labels: ["Account", "Sales", "Profit", "Withdrawals"],
    datasets: [{
      data: [
        <?php echo $user['account_balance']; ?>,
        <?php echo $user['total_bonus']; ?>,
        <?php echo $user['profit_balance']; ?>,
        <?php echo floatval($user['total_withdrawal'] ?? 0); ?>
      ],
      backgroundColor: ['#667eea', '#f56565', '#48bb78', '#f6ad55'],
      borderWidth: 0
    }]
  },
  options: {
    cutout: '70%',
    plugins: { legend: { display: true, position: 'bottom' } }
  }
});

// 🔥 Fetch Live Market Rates (in USD)
async function fetchLiveTicker() {
  try {
    const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum,solana,usd-coin,cardano,ripple,litecoin,dogecoin&vs_currencies=usd');
    const data = await response.json();
    const text = `
      💹 BTC: $${data.bitcoin.usd.toLocaleString()} |
      ETH: $${data.ethereum.usd.toLocaleString()} |
      SOL: $${data.solana.usd.toLocaleString()} |
      ADA: $${data.cardano.usd.toLocaleString()} |
      XRP: $${data.ripple.usd.toLocaleString()} |
      LTC: $${data.litecoin.usd.toLocaleString()} |
      DOGE: $${data.dogecoin.usd.toLocaleString()} |
      USDC: $${data['usd-coin'].usd.toLocaleString()} |
      🌎 Market updates every 60s 🚀
    `;
    document.getElementById('liveTicker').textContent = text;
  } catch (err) {
    document.getElementById('liveTicker').textContent = 'Error loading live USD market rates.';
  }
}
fetchLiveTicker();
setInterval(fetchLiveTicker, 60000);
</script>

<?php include "footer.php"; ?>