283 lines
14 KiB
HTML
283 lines
14 KiB
HTML
{% extends 'layouts/base.html' %}
|
|
|
|
{% block title %}Suite Consultance - CRM{% endblock %}
|
|
{% block module_name %}crm{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1 class="h2 text-crm">Gestion de la Relation Client (CRM)</h1>
|
|
<a href="{{ url_for('add_client') }}" class="btn btn-crm">
|
|
<i class="fas fa-plus"></i> Ajouter un client
|
|
</a>
|
|
</div>
|
|
|
|
<ul class="nav nav-tabs mb-4" id="crmTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="clients-tab" data-bs-toggle="tab" data-bs-target="#clients-tab-pane" type="button" role="tab" aria-controls="clients-tab-pane" aria-selected="true">
|
|
<i class="fas fa-user-tie"></i> Clients
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="prospects-tab" data-bs-toggle="tab" data-bs-target="#prospects-tab-pane" type="button" role="tab" aria-controls="prospects-tab-pane" aria-selected="false">
|
|
<i class="fas fa-user-plus"></i> Prospects
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="dashboard-tab" data-bs-toggle="tab" data-bs-target="#dashboard-tab-pane" type="button" role="tab" aria-controls="dashboard-tab-pane" aria-selected="false">
|
|
<i class="fas fa-chart-pie"></i> Tableau de bord
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="crmTabContent">
|
|
<!-- Onglet Clients -->
|
|
<div class="tab-pane fade show active" id="clients-tab-pane" role="tabpanel" aria-labelledby="clients-tab" tabindex="0">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Email</th>
|
|
<th>Téléphone</th>
|
|
<th>Projet</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% if clients %}
|
|
{% for client in clients %}
|
|
<tr>
|
|
<td>{{ client.name }}</td>
|
|
<td>{{ client.email }}</td>
|
|
<td>{{ client.phone }}</td>
|
|
<td>{{ client.company }}</td>
|
|
<td>
|
|
<div class="btn-group" role="group">
|
|
<a href="{{ url_for('client_details', client_id=client.name|lower|replace(' ', '_')) }}" class="btn btn-sm btn-info" title="Détails">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a href="{{ url_for('create_proposition') }}?client_id={{ client.name|lower|replace(' ', '_') }}" class="btn btn-sm btn-success" title="Créer une proposition">
|
|
<i class="fas fa-file-contract"></i>
|
|
</a>
|
|
<a href="{{ url_for('create_devis') }}?client_id={{ client.name|lower|replace(' ', '_') }}" class="btn btn-sm btn-warning" title="Créer un devis">
|
|
<i class="fas fa-file-invoice-dollar"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="5" class="text-center">Aucun client trouvé</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Onglet Prospects -->
|
|
<div class="tab-pane fade" id="prospects-tab-pane" role="tabpanel" aria-labelledby="prospects-tab" tabindex="0">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="mb-3 d-flex justify-content-between">
|
|
<div>
|
|
<a href="{{ url_for('add_prospect') }}" class="btn btn-outline-primary">
|
|
<i class="fas fa-plus"></i> Ajouter un prospect
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<a href="{{ url_for('send_bulk_email') }}" class="btn btn-outline-primary me-2">
|
|
<i class="fas fa-envelope"></i> Campagne d'emails
|
|
</a>
|
|
<a href="{{ url_for('email_templates') }}" class="btn btn-outline-info me-2">
|
|
<i class="fas fa-file-alt"></i> Templates
|
|
</a>
|
|
<a href="{{ url_for('email_config') }}" class="btn btn-outline-secondary">
|
|
<i class="fas fa-cog"></i> Configuration
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Email</th>
|
|
<th>Téléphone</th>
|
|
<th>Statut</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% if prospects %}
|
|
{% for prospect in prospects %}
|
|
<tr>
|
|
<td>{{ prospect.name }}</td>
|
|
<td>{{ prospect.email }}</td>
|
|
<td>{{ prospect.phone }}</td>
|
|
<td>
|
|
<span class="badge bg-{{ prospect.status|lower == 'nouveau' and 'primary' or (prospect.status|lower == 'contacté' and 'info' or (prospect.status|lower == 'qualifié' and 'success' or (prospect.status|lower == 'proposition' and 'warning' or 'secondary'))) }}">
|
|
{{ prospect.status }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div class="btn-group" role="group">
|
|
<a href="{{ url_for('prospect_details', prospect_id=prospect.id) }}" class="btn btn-sm btn-info" title="Détails">
|
|
<i class="fas fa-eye"></i>
|
|
</a>
|
|
<a href="{{ url_for('edit_prospect', prospect_id=prospect.id) }}" class="btn btn-sm btn-primary" title="Modifier">
|
|
<i class="fas fa-edit"></i>
|
|
</a>
|
|
<a href="{{ url_for('convert_prospect', prospect_id=prospect.id) }}" class="btn btn-sm btn-success" title="Convertir en client" onclick="return confirm('Êtes-vous sûr de vouloir convertir ce prospect en client ?');">
|
|
<i class="fas fa-user-check"></i>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="5" class="text-center">Aucun prospect trouvé</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Onglet Tableau de bord -->
|
|
<div class="tab-pane fade" id="dashboard-tab-pane" role="tabpanel" aria-labelledby="dashboard-tab" tabindex="0">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="card-title mb-0">Répartition clients/prospects</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="clientProspectChart" width="400" height="300"></canvas>
|
|
<div class="row mt-4">
|
|
<div class="col-md-6 text-center">
|
|
<div class="h4 mb-0">{{ dashboard_stats.total_clients }}</div>
|
|
<div class="small text-muted">Total Clients</div>
|
|
</div>
|
|
<div class="col-md-6 text-center">
|
|
<div class="h4 mb-0">{{ dashboard_stats.total_prospects }}</div>
|
|
<div class="small text-muted">Total Prospects</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="card-title mb-0">Statut des prospects</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="prospectStatusChart" width="400" height="300"></canvas>
|
|
<div class="row mt-3">
|
|
{% for status, count in dashboard_stats.prospect_status.items() %}
|
|
<div class="col-md-4 text-center mb-2">
|
|
<div class="h5 mb-0">{{ count }}</div>
|
|
<div class="small text-muted">{{ status }}</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Graphique répartition clients/prospects
|
|
const clientProspectCtx = document.getElementById('clientProspectChart').getContext('2d');
|
|
const clientProspectChart = new Chart(clientProspectCtx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: ['Clients', 'Prospects'],
|
|
datasets: [{
|
|
data: [{{ dashboard_stats.total_clients }}, {{ dashboard_stats.total_prospects }}],
|
|
backgroundColor: [
|
|
'rgba(54, 162, 235, 0.7)',
|
|
'rgba(255, 99, 132, 0.7)'
|
|
],
|
|
borderColor: [
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 99, 132, 1)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Graphique statut des prospects
|
|
const prospectStatusCtx = document.getElementById('prospectStatusChart').getContext('2d');
|
|
const prospectStatusChart = new Chart(prospectStatusCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [{% for status in dashboard_stats.prospect_status %}'{{ status }}',{% endfor %}],
|
|
datasets: [{
|
|
label: 'Nombre de prospects',
|
|
data: [{% for status, count in dashboard_stats.prospect_status.items() %}{{ count }},{% endfor %}],
|
|
backgroundColor: [
|
|
'rgba(255, 99, 132, 0.7)',
|
|
'rgba(54, 162, 235, 0.7)',
|
|
'rgba(255, 206, 86, 0.7)',
|
|
'rgba(75, 192, 192, 0.7)',
|
|
'rgba(153, 102, 255, 0.7)'
|
|
],
|
|
borderColor: [
|
|
'rgba(255, 99, 132, 1)',
|
|
'rgba(54, 162, 235, 1)',
|
|
'rgba(255, 206, 86, 1)',
|
|
'rgba(75, 192, 192, 1)',
|
|
'rgba(153, 102, 255, 1)'
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
precision: 0
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|