First Commit
This commit is contained in:
+103
@@ -0,0 +1,103 @@
|
||||
{% extends "layouts/dashboard.twig" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid px-4">
|
||||
<h1 class="mt-4">Estatísticas de Afiliados</h1>
|
||||
<ol class="breadcrumb mb-4">
|
||||
<li class="breadcrumb-item"><a href="/admin/dashboard">Dashboard</a></li>
|
||||
<li class="breadcrumb-item active">Estatísticas</li>
|
||||
</ol>
|
||||
|
||||
{% include '@affiliatesadmin/nav.twig' %}
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card bg-primary text-white mb-4">
|
||||
<div class="card-body">Total de Afiliados</div>
|
||||
<div class="card-footer d-flex align-items-center justify-content-between">
|
||||
<h4 class="mb-0">{{ stats.total_affiliates ?? 0 }}</h4>
|
||||
<i class="bi bi-people-fill fs-2 opacity-50"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card bg-success text-white mb-4">
|
||||
<div class="card-body">Comissões Aprovadas</div>
|
||||
<div class="card-footer d-flex align-items-center justify-content-between">
|
||||
<h4 class="mb-0">R$ {{ stats.total_commissions_approved ?? 0|number_format(2, ',', '.') }}</h4>
|
||||
<i class="bi bi-cash-stack fs-2 opacity-50"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card bg-warning text-white mb-4">
|
||||
<div class="card-body">Cliques nos Banners</div>
|
||||
<div class="card-footer d-flex align-items-center justify-content-between">
|
||||
<h4 class="mb-0">{{ stats.total_clicks ?? 0 }}</h4>
|
||||
<i class="bi bi-mouse2 fs-2 opacity-50"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-3 col-md-6">
|
||||
<div class="card bg-info text-white mb-4">
|
||||
<div class="card-body">Conversão Média</div>
|
||||
<div class="card-footer d-flex align-items-center justify-content-between">
|
||||
<h4 class="mb-0">{{ stats.conversion_rate ?? 0 }}%</h4>
|
||||
<i class="bi bi-graph-up-arrow fs-2 opacity-50"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-graph-up me-1"></i>
|
||||
Gráfico de Ganhos por Mês
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="myAreaChart" width="100%" height="40"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block scripts %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var ctx = document.getElementById("myAreaChart");
|
||||
if (ctx) {
|
||||
var myLineChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
|
||||
datasets: [{
|
||||
label: "Comissões (R$)",
|
||||
lineTension: 0.3,
|
||||
backgroundColor: "rgba(78, 115, 223, 0.05)",
|
||||
borderColor: "rgba(78, 115, 223, 1)",
|
||||
pointRadius: 3,
|
||||
pointBackgroundColor: "rgba(78, 115, 223, 1)",
|
||||
pointBorderColor: "rgba(78, 115, 223, 1)",
|
||||
pointHoverRadius: 3,
|
||||
pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
|
||||
pointHoverBorderColor: "rgba(78, 115, 223, 1)",
|
||||
pointHitRadius: 10,
|
||||
pointBorderWidth: 2,
|
||||
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // Dados reais viriam do controller
|
||||
}],
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user