File "dashboard.php"

Full Path: /home/quiczmwg/lightspringdigitals.com/dashboard/__MACOSX/uploads/dashboard.php
File size: 11.03 KB
MIME-type: text/x-php
Charset: utf-8

<?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 based on total_commission)
$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">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- cards -->
<div class="w-full px-6 py-6 mx-auto">
  <!-- row 1 -->
  <div class="flex flex-wrap -mx-3">
    <!-- Account Balance -->
    <div class="w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none xl:mb-0 xl:w-1/4">
      <div class="relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
        <div class="flex-auto p-4">
          <div class="flex flex-row -mx-3">
            <div class="flex-none w-2/3 max-w-full px-3">
              <div>
                    <p class="mb-0 font-sans text-sm font-semibold uppercase dark:text-white dark:opacity-60" style="white-space: nowrap;">Account Balance</p>
                <h5 class="mb-2 font-bold dark:text-white">$<?php echo number_format($user['account_balance'], 2); ?></h5>
              </div>
            </div>
            <div class="px-3 text-right basis-1/3">
              <div class="inline-block w-12 h-12 text-center rounded-circle bg-gradient-to-tl from-blue-500 to-violet-500">
                <i class="ni ni-money-coins text-lg relative top-3.5 text-white"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Total Bonus -->
    <div class="w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none xl:mb-0 xl:w-1/4">
      <div class="relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
        <div class="flex-auto p-4">
          <div class="flex flex-row -mx-3">
            <div class="flex-none w-2/3 max-w-full px-3">
              <div>
                <p class="mb-0 font-sans text-sm font-semibold uppercase dark:text-white dark:opacity-60" style="white-space: nowrap;">Sales Balance</p>
                <h5 class="mb-2 font-bold dark:text-white">$<?php echo number_format($user['total_bonus'], 2); ?></h5>
              </div>
            </div>
            <div class="px-3 text-right basis-1/3">
              <div class="inline-block w-12 h-12 text-center rounded-circle bg-gradient-to-tl from-red-600 to-orange-600">
                <i class="ni ni-world text-lg relative top-3.5 text-white"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Profit Balance -->
    <div class="w-full max-w-full px-3 mb-6 sm:w-1/2 sm:flex-none xl:mb-0 xl:w-1/4">
      <div class="relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
        <div class="flex-auto p-4">
          <div class="flex flex-row -mx-3">
            <div class="flex-none w-2/3 max-w-full px-3">
              <div>
                <p class="mb-0 font-sans text-sm font-semibold uppercase dark:text-white dark:opacity-60" style="white-space: nowrap;">
    Profit Balance
</p>

                <h5 class="mb-2 font-bold dark:text-white">$<?php echo number_format($user['profit_balance'], 2); ?></h5>
              </div>
            </div>
            <div class="px-3 text-right basis-1/3">
              <div class="inline-block w-12 h-12 text-center rounded-circle bg-gradient-to-tl from-emerald-500 to-teal-400">
                <i class="ni ni-paper-diploma text-lg relative top-3.5 text-white"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Total Withdrawal -->
    <div class="w-full max-w-full px-3 sm:w-1/2 sm:flex-none xl:w-1/4">
      <div class="relative flex flex-col min-w-0 break-words bg-white shadow-xl dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border">
        <div class="flex-auto p-4">
          <div class="flex flex-row -mx-3">
            <div class="flex-none w-2/3 max-w-full px-3">
              <div>
                <p class="mb-0 font-sans text-sm font-semibold uppercase dark:text-white dark:opacity-60" style="white-space: nowrap;">Total Withdrawal</p>
                <h5 class="mb-2 font-bold dark:text-white">$<?php echo number_format(floatval($user['total_withdrawal'] ?? 0), 2) ?></h5>
              </div>
            </div>
            <div class="px-3 text-right basis-1/3">
              <div class="inline-block w-12 h-12 text-center rounded-circle bg-gradient-to-tl from-orange-500 to-yellow-500">
                <i class="ni ni-cart text-lg relative top-3.5 text-white"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- cards row 2 -->
  <div class="custom-footer"></div>

  <div class="flex flex-wrap mt-6 -mx-3">
    <!-- Profit Overview Chart -->
   <style>
    body {
        background: #f4f6fa;
        font-family: 'Segoe UI', sans-serif;
    }

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

    .commission-value {
        font-size: 2.3rem;
        font-weight: 600;
        color: #333;
    }

    .commission-label {
        color: #666;
        font-size: 14px;
    }

    .chart-container {
        width: 100%;
        height: auto;
        position: relative;
    }
</style>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8 chart-card">
            <div class="text-center mb-4">
                <h4 class="fw-semibold">Your Commission Trend</h4>
                <p class="text-muted mb-0">Based on your total commission earnings</p>
            </div>

            <div class="chart-container">
                <canvas id="commissionChart"></canvas>
            </div>

            <div class="text-center mt-4">
                <div class="commission-value">$<?php echo number_format($total_commission, 2); ?></div>
                <div class="commission-label">Total Commission Earned</div>
            </div>
        </div>
    </div>
</div>

<script>
    const ctx = document.getElementById('commissionChart').getContext('2d');
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["", "", "", "", "", ""],
            datasets: [{
                data: <?php echo json_encode($commissionHistory); ?>,
                fill: true,
                backgroundColor: 'rgba(102, 126, 234, 0.15)',
                borderColor: '#667eea',
                borderWidth: 3,
                pointRadius: 3,
                pointBackgroundColor: '#764ba2',
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: { display: false },
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: (value) => '$' + value,
                        color: '#999',
                        font: { size: 12 }
                    }
                }
            },
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return "$" + context.parsed.y;
                        }
                    }
                }
            }
        }
    });
</script>



    <div class="w-full max-w-full px-3 lg:w-5/12 lg:flex-none">
      <div slider class="relative w-full h-full overflow-hidden rounded-2xl">
        <!-- slide 1 -->
        <!-- Slide 1 - Digital Presence -->
        <div slide class="absolute w-full h-full transition-all duration-500">
          <img class="object-cover h-full" src="./assets/img/carousel-1.jpg" alt="carousel image" />
          <div class="block text-start ml-12 left-0 bottom-0 absolute right-[15%] pt-5 pb-5 text-white">
            <div class="inline-block w-8 h-8 mb-4 text-center text-black bg-white bg-center rounded-lg fill-current stroke-none">
              <i class="top-0.75 text-xxs relative text-slate-700 ni ni-spaceship"></i>
            </div>
            <h5 class="mb-1 text-white">Launch Your Digital Success</h5>
            <p class="dark:opacity-80">Start your journey with ChoicyDigitals — where we turn ideas into high-converting digital campaigns and brand experiences.</p>
          </div>
        </div>


        <!-- slide 2 -->
        <!-- Slide 2 - Digital Marketing Strategy -->
        <div slide class="absolute w-full h-full transition-all duration-500">
          <img class="object-cover h-full" src="./assets/img/carousel-2.jpg" alt="carousel image" />
          <div class="block text-start ml-12 left-0 bottom-0 absolute right-[15%] pt-5 pb-5 text-white">
            <div class="inline-block w-8 h-8 mb-4 text-center text-black bg-white bg-center rounded-lg fill-current stroke-none">
              <i class="top-0.75 text-xxs relative text-slate-700 ni ni-world-2"></i>
            </div>
            <h5 class="mb-1 text-white">Grow Your Brand Online</h5>
            <p class="dark:opacity-80">We create powerful digital marketing strategies that drive traffic, leads, and real results for your business.</p>
          </div>
        </div>

        <!-- Slide 3 - Social Media & Campaigns -->
        <div slide class="absolute w-full h-full transition-all duration-500">
          <img class="object-cover h-full" src="./assets/img/carousel-3.jpg" alt="carousel image" />
          <div class="block text-start ml-12 left-0 bottom-0 absolute right-[15%] pt-5 pb-5 text-white">
            <div class="inline-block w-8 h-8 mb-4 text-center text-black bg-white bg-center rounded-lg fill-current stroke-none">
              <i class="top-0.75 text-xxs relative text-slate-700 ni ni-chat-round"></i>
            </div>
            <h5 class="mb-1 text-white">Engage. Convert. Retain.</h5>
            <p class="dark:opacity-80">From social media to email campaigns, we help you connect with your audience and build lasting relationships.</p>
          </div>
        </div>

        <!-- Control buttons -->
        <button btn-next class="absolute z-10 w-10 h-10 p-2 text-lg text-white border-none opacity-50 cursor-pointer hover:opacity-100 far fa-chevron-right active:scale-110 top-6 right-4"></button>
        <button btn-prev class="absolute z-10 w-10 h-10 p-2 text-lg text-white border-none opacity-50 cursor-pointer hover:opacity-100 far fa-chevron-left active:scale-110 top-6 right-16"></button>
      </div>
    </div>
  </div>

  <!-- cards row 3 -->

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