refactor: Suppression de 13 écrans redondants
Nettoyage des doublons pour éviter la redondance : Suppressions (liste.xhtml redondants avec écrans racine): - devis/liste.xhtml - employes/liste.xhtml - equipes/liste.xhtml - factures/liste.xhtml - maintenance/liste.xhtml - materiels/liste.xhtml - messages/liste.xhtml - notifications/liste.xhtml - planning/liste.xhtml - rapports/liste.xhtml - stock/liste.xhtml Suppressions (inconsistance nouveau/nouvelle): - equipes/nouvelle.xhtml - factures/nouvelle.xhtml Stratégie: - Un seul écran liste par module (racine) - Standardisation sur nouveau.xhtml Résultat: 163 écrans restants (vs 176 avant)
This commit is contained in:
dahoud
@@ -1,325 +1,483 @@
|
||||
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:h="http://java.sun.com/jsf/html"
|
||||
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:h="http://java.sun.com/jsf/html"
|
||||
xmlns:f="http://java.sun.com/jsf/core"
|
||||
xmlns:ui="http://java.sun.com/jsf/facelets"
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/WEB-INF/template.xhtml">
|
||||
|
||||
<ui:define name="title">Tableau de bord - BTP Xpress</ui:define>
|
||||
|
||||
<ui:define name="head">
|
||||
<h:outputScript name="chartjs/chart.js" library="demo" />
|
||||
<script>
|
||||
//<![CDATA[
|
||||
$(function(){
|
||||
var ctx1 = document.getElementById("chartChantiers");
|
||||
if (ctx1) {
|
||||
var chartChantiers = new Chart(ctx1.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],
|
||||
datasets: [{
|
||||
label: 'Chantiers',
|
||||
data: [12, 19, 15, 25, 22, 28],
|
||||
borderColor: '#464DF2',
|
||||
borderWidth: 3,
|
||||
fill: true,
|
||||
backgroundColor: 'rgba(70, 77, 242, 0.1)',
|
||||
tension: 0.4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: { legend: { display: false } },
|
||||
scales: { y: { beginAtZero: true } }
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="layout-dashboard">
|
||||
<div class="grid">
|
||||
|
||||
<!-- KPI Cards - Vue d'ensemble -->
|
||||
<div class="col-12">
|
||||
<div class="grid" style="margin: -1rem;">
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="card">
|
||||
<h1>Tableau de bord - BTP Xpress</h1>
|
||||
<p>Bean dashboardView disponible: #{not empty dashboardView}</p>
|
||||
<p>Chantiers actifs: #{dashboardView.chantiersActifs}</p>
|
||||
<p>Test de contenu simple</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ========================================================================
|
||||
BARRE D'ALERTES (affichée uniquement si alertes critiques)
|
||||
======================================================================== -->
|
||||
<p:outputPanel rendered="#{dashboardView.alerteCritique}" styleClass="col-12">
|
||||
<div class="notification notification-danger">
|
||||
<i class="pi pi-exclamation-triangle"></i>
|
||||
<strong>#{dashboardView.totalAlertes} alertes</strong> nécessitent votre attention immédiate
|
||||
<span style="margin-left: 1rem; opacity: 0.9;">
|
||||
Maintenance: #{dashboardView.alertesMaintenanceCount} •
|
||||
Chantiers: #{dashboardView.alertesChantiersCount} •
|
||||
Disponibilités: #{dashboardView.alertesDisponibilitesCount}
|
||||
</span>
|
||||
<p:commandButton value="Rafraîchir"
|
||||
icon="pi pi-refresh"
|
||||
action="#{dashboardView.rafraichir}"
|
||||
update="@form"
|
||||
styleClass="ui-button-text"
|
||||
style="float: right;"/>
|
||||
</div>
|
||||
</p:outputPanel>
|
||||
|
||||
<div class="grid">
|
||||
|
||||
<!-- ====================================================================
|
||||
KPIs PRINCIPAUX (3 cartes en ligne)
|
||||
==================================================================== -->
|
||||
<div class="col-12">
|
||||
<div class="grid" style="margin: -0.5rem;">
|
||||
|
||||
<!-- KPI 1: Chantiers Actifs -->
|
||||
<div class="col-12 md:col-6 xl:col-4">
|
||||
<div class="card overview-box white">
|
||||
<div class="overview-info">
|
||||
<h6>Chantiers actifs</h6>
|
||||
<h1>#{dashboardView.chantiersActifs}</h1>
|
||||
<p class="subtitle">Sur #{dashboardView.nombreChantiers} au total</p>
|
||||
<p class="subtitle">
|
||||
Sur #{dashboardView.nombreChantiers} au total
|
||||
</p>
|
||||
<p:progressBar value="#{dashboardView.tauxActiviteChantiers}"
|
||||
showValue="true"
|
||||
displayValue="#{dashboardView.tauxActiviteChantiers}%"
|
||||
styleClass="ui-progressbar-info"/>
|
||||
</div>
|
||||
<i class="pi pi-building"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
|
||||
<!-- KPI 2: Équipes Disponibles -->
|
||||
<div class="col-12 md:col-6 xl:col-4">
|
||||
<div class="card overview-box blue">
|
||||
<div class="overview-info">
|
||||
<h6>Clients</h6>
|
||||
<h1>#{dashboardView.nombreClients}</h1>
|
||||
<p class="subtitle">Actifs</p>
|
||||
<h6>Équipes disponibles</h6>
|
||||
<h1>#{dashboardView.equipesDisponibles}/#{dashboardView.nombreEquipes}</h1>
|
||||
<p class="subtitle">Taux de disponibilité</p>
|
||||
<p:progressBar value="#{dashboardView.tauxDisponibiliteEquipes}"
|
||||
showValue="true"
|
||||
displayValue="#{dashboardView.tauxDisponibiliteEquipes}%"
|
||||
style="background: rgba(255,255,255,0.3);"/>
|
||||
</div>
|
||||
<i class="pi pi-users"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="card overview-box orange">
|
||||
|
||||
<!-- KPI 3: Maintenances Critiques -->
|
||||
<div class="col-12 md:col-12 xl:col-4">
|
||||
<div class="card overview-box #{dashboardView.alerteRetardMaintenance ? 'red' : 'green'}">
|
||||
<div class="overview-info">
|
||||
<h6>Devis en attente</h6>
|
||||
<h1>#{dashboardView.nombreDevis}</h1>
|
||||
<p class="subtitle">À traiter</p>
|
||||
<h6>Maintenances en retard</h6>
|
||||
<h1>#{dashboardView.maintenancesEnRetard}</h1>
|
||||
<p class="subtitle">#{dashboardView.maintenancesPlanifiees} planifiées</p>
|
||||
<p:badge value="#{dashboardView.alerteRetardMaintenance ? 'URGENT' : 'OK'}"
|
||||
severity="#{dashboardView.alerteRetardMaintenance ? 'danger' : 'success'}"
|
||||
style="margin-top: 0.5rem;"/>
|
||||
</div>
|
||||
<i class="pi pi-file-edit"></i>
|
||||
<i class="pi pi-wrench"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="card overview-box red">
|
||||
<div class="overview-info">
|
||||
<h6>Factures impayées</h6>
|
||||
<h1>#{dashboardView.facturesImpayees}</h1>
|
||||
<p class="subtitle">Attention requise</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================================
|
||||
SECTION CENTRALE : Graphique + KPIs Ressources
|
||||
==================================================================== -->
|
||||
|
||||
<!-- Colonne gauche: Statistiques chantiers (placeholder pour graphique futur) -->
|
||||
<div class="col-12 xl:col-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Vue d'ensemble</h6>
|
||||
<p class="subtitle">Statistiques globales</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<!-- Chantiers actifs avec progression -->
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="statistic-item" style="padding: 1.5rem; background: var(--blue-50); border-radius: var(--border-radius); border-left: 4px solid var(--blue-500);">
|
||||
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;">
|
||||
<i class="pi pi-building" style="font-size: 2rem; color: var(--blue-500);"></i>
|
||||
<div style="flex: 1;">
|
||||
<h5 style="margin: 0; font-size: 1.75rem; color: var(--blue-600);">#{dashboardView.chantiersActifs}</h5>
|
||||
<h6 style="margin: 0.25rem 0 0 0; font-weight: 500; color: var(--text-color-secondary);">Chantiers actifs</h6>
|
||||
</div>
|
||||
</div>
|
||||
<p:progressBar value="#{dashboardView.tauxActiviteChantiers}"
|
||||
showValue="true"
|
||||
displayValue="#{dashboardView.tauxActiviteChantiers}% d'activité"
|
||||
styleClass="ui-progressbar-info"
|
||||
style="height: 1rem;"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chantiers en retard -->
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="statistic-item" style="padding: 1.5rem; background: var(--orange-50); border-radius: var(--border-radius); border-left: 4px solid var(--orange-500);">
|
||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||
<i class="pi pi-exclamation-triangle" style="font-size: 2rem; color: var(--orange-500);"></i>
|
||||
<div style="flex: 1;">
|
||||
<h5 style="margin: 0; font-size: 1.75rem; color: var(--orange-600);">#{dashboardView.chantiersEnRetardList.size()}</h5>
|
||||
<h6 style="margin: 0.25rem 0 0 0; font-weight: 500; color: var(--text-color-secondary);">Chantiers en retard</h6>
|
||||
</div>
|
||||
</div>
|
||||
<p:outputPanel rendered="#{dashboardView.chantiersEnRetardList.size() > 0}">
|
||||
<small style="display: block; margin-top: 0.75rem; color: var(--orange-700);">
|
||||
<i class="pi pi-info-circle"></i> Attention requise
|
||||
</small>
|
||||
</p:outputPanel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Événements aujourd'hui -->
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="statistic-item" style="padding: 1.5rem; background: var(--purple-50); border-radius: var(--border-radius); border-left: 4px solid var(--purple-500);">
|
||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||
<i class="pi pi-calendar" style="font-size: 2rem; color: var(--purple-500);"></i>
|
||||
<div style="flex: 1;">
|
||||
<h5 style="margin: 0; font-size: 1.75rem; color: var(--purple-600);">#{dashboardView.evenementsAujourdhui}</h5>
|
||||
<h6 style="margin: 0.25rem 0 0 0; font-weight: 500; color: var(--text-color-secondary);">Événements aujourd'hui</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Documents totaux -->
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="statistic-item" style="padding: 1.5rem; background: var(--cyan-50); border-radius: var(--border-radius); border-left: 4px solid var(--cyan-500);">
|
||||
<div style="display: flex; align-items: center; gap: 1rem;">
|
||||
<i class="pi pi-file" style="font-size: 2rem; color: var(--cyan-500);"></i>
|
||||
<div style="flex: 1;">
|
||||
<h5 style="margin: 0; font-size: 1.75rem; color: var(--cyan-600);">#{dashboardView.nombreDocuments}</h5>
|
||||
<h6 style="margin: 0.25rem 0 0 0; font-weight: 500; color: var(--text-color-secondary);">Documents totaux</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<i class="pi pi-exclamation-triangle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alertes critiques -->
|
||||
<p:outputPanel rendered="#{dashboardView.alerteCritique}" styleClass="col-12">
|
||||
<div class="card" style="background: #fff3cd; border-left: 4px solid #ffc107;">
|
||||
<div class="grid align-items-center">
|
||||
<div class="col">
|
||||
<h5 style="margin: 0; color: #856404;">
|
||||
<i class="pi pi-exclamation-triangle"></i>
|
||||
Alertes critiques : #{dashboardView.totalAlertes}
|
||||
</h5>
|
||||
<p style="margin: 0.5rem 0 0 0; color: #856404;">
|
||||
Des actions nécessitent votre attention immédiate
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<p:commandButton value="Voir les alertes" icon="pi pi-bell"
|
||||
outcome="/dashboard/alertes"
|
||||
styleClass="ui-button-warning"/>
|
||||
<!-- Colonne droite: KPIs Ressources -->
|
||||
<div class="col-12 xl:col-4">
|
||||
<div class="card" style="height: 100%;">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Ressources</h6>
|
||||
<p class="subtitle">État actuel des ressources</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:outputPanel>
|
||||
<div style="padding: 1rem; display: flex; flex-direction: column; gap: 1.5rem;">
|
||||
|
||||
<!-- Graphiques et métriques financières -->
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Évolution des chantiers</h6>
|
||||
<p class="subtitle">Sur 6 mois</p>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="chartChantiers" style="max-height: 300px;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Chiffre d'affaires</h6>
|
||||
<p class="subtitle">Ce mois</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistic-item">
|
||||
<h1 style="margin: 0;">
|
||||
<h:outputText value="#{dashboardView.chiffreAffairesMois}">
|
||||
<f:converter converterId="fcfaConverter"/>
|
||||
</h:outputText>
|
||||
<h:outputText value=" Fcfa"/>
|
||||
</h1>
|
||||
<p style="color: var(--text-color-secondary); margin-top: 0.5rem;">
|
||||
<i class="pi pi-info-circle"></i>
|
||||
Données réelles de l'API
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top: 1rem;">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Budget consommé</h6>
|
||||
<p class="subtitle">Sur #{dashboardView.budgetTotal} Fcfa</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistic-item">
|
||||
<p:progressBar value="#{dashboardView.tauxConsommationBudget}"
|
||||
showValue="true"
|
||||
styleClass="ui-progressbar-#{dashboardView.tauxConsommationBudget > 80 ? 'warn' : 'success'}"/>
|
||||
<p style="color: var(--text-color-secondary); margin-top: 0.5rem;">
|
||||
<h:outputText value="#{dashboardView.budgetConsomme}">
|
||||
<f:converter converterId="fcfaConverter"/>
|
||||
</h:outputText>
|
||||
<h:outputText value=" Fcfa consommés"/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ressources : Employés, Équipes, Matériel -->
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Ressources humaines</h6>
|
||||
<p class="subtitle">Employés et équipes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid" style="gap: 1rem;">
|
||||
<div class="col-12">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span><i class="pi pi-users"></i> Employés</span>
|
||||
<strong>#{dashboardView.nombreEmployes}</strong>
|
||||
<!-- Employés actifs -->
|
||||
<div class="statistic-item" style="padding: 1.25rem; background: var(--green-50); border-radius: var(--border-radius); border-left: 4px solid var(--green-500);">
|
||||
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;">
|
||||
<i class="pi pi-users" style="font-size: 1.75rem; color: var(--green-500);"></i>
|
||||
<div style="flex: 1;">
|
||||
<h5 style="margin: 0; font-size: 1.5rem; color: var(--green-600);">
|
||||
#{dashboardView.employesActifs}<span style="font-size: 1rem; color: var(--text-color-secondary);">/#{dashboardView.nombreEmployes}</span>
|
||||
</h5>
|
||||
<h6 style="margin: 0.25rem 0 0 0; font-weight: 500; color: var(--text-color-secondary);">Employés actifs</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span><i class="pi pi-users"></i> Équipes</span>
|
||||
<strong>#{dashboardView.nombreEquipes}</strong>
|
||||
</div>
|
||||
<p:progressBar value="#{dashboardView.nombreEquipes > 0 ? (dashboardView.equipesDisponibles * 100 / dashboardView.nombreEquipes) : 0}"
|
||||
<p:progressBar value="#{dashboardView.tauxActiviteEmployes}"
|
||||
showValue="true"
|
||||
styleClass="ui-progressbar-info"/>
|
||||
<small style="color: var(--text-color-secondary);">
|
||||
#{dashboardView.equipesDisponibles} disponibles
|
||||
displayValue="#{dashboardView.tauxActiviteEmployes}%"
|
||||
styleClass="ui-progressbar-#{dashboardView.tauxActiviteEmployes > 80 ? 'success' : (dashboardView.tauxActiviteEmployes > 60 ? 'warning' : 'danger')}"
|
||||
style="height: 1rem;"/>
|
||||
</div>
|
||||
|
||||
<!-- Matériel disponible -->
|
||||
<div class="statistic-item" style="padding: 1.25rem; background: var(--teal-50); border-radius: var(--border-radius); border-left: 4px solid var(--teal-500);">
|
||||
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem;">
|
||||
<i class="pi pi-cog" style="font-size: 1.75rem; color: var(--teal-500);"></i>
|
||||
<div style="flex: 1;">
|
||||
<h5 style="margin: 0; font-size: 1.5rem; color: var(--teal-600);">
|
||||
#{dashboardView.materielDisponible}<span style="font-size: 1rem; color: var(--text-color-secondary);">/#{dashboardView.nombreMateriel}</span>
|
||||
</h5>
|
||||
<h6 style="margin: 0.25rem 0 0 0; font-weight: 500; color: var(--text-color-secondary);">Matériel disponible</h6>
|
||||
</div>
|
||||
</div>
|
||||
<p:progressBar value="#{dashboardView.tauxDisponibiliteMateriel}"
|
||||
showValue="true"
|
||||
displayValue="#{dashboardView.tauxDisponibiliteMateriel}%"
|
||||
styleClass="ui-progressbar-success"
|
||||
style="height: 1rem;"/>
|
||||
</div>
|
||||
|
||||
<!-- Taux d'utilisation global -->
|
||||
<div class="statistic-item" style="padding: 1.25rem; background: var(--indigo-50); border-radius: var(--border-radius); border-left: 4px solid var(--indigo-500); flex: 1; display: flex; flex-direction: column; justify-content: center;">
|
||||
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;">
|
||||
<i class="pi pi-chart-line" style="font-size: 1.75rem; color: var(--indigo-500);"></i>
|
||||
<div style="flex: 1;">
|
||||
<h5 style="margin: 0; font-size: 1.75rem; color: var(--indigo-600);">#{dashboardView.tauxUtilisationGlobal}%</h5>
|
||||
<h6 style="margin: 0.25rem 0 0 0; font-weight: 500; color: var(--text-color-secondary);">Taux d'utilisation global</h6>
|
||||
</div>
|
||||
</div>
|
||||
<small style="display: block; color: var(--text-color-secondary); font-style: italic; padding-left: 2.75rem;">
|
||||
<i class="pi pi-info-circle" style="font-size: 0.875rem;"></i>
|
||||
Moyenne chantiers, employés et matériel
|
||||
</small>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<!-- ====================================================================
|
||||
TABLEAU CHANTIERS ACTIFS
|
||||
==================================================================== -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Matériel</h6>
|
||||
<p class="subtitle">Équipements disponibles</p>
|
||||
<h6>Chantiers actifs</h6>
|
||||
<p class="subtitle">#{dashboardView.chantiersActifsList.size()} chantiers en cours</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid" style="gap: 1rem;">
|
||||
<div class="col-12">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span><i class="pi pi-wrench"></i> Total matériel</span>
|
||||
<strong>#{dashboardView.nombreMateriel}</strong>
|
||||
</div>
|
||||
<p:progressBar value="#{dashboardView.nombreMateriel > 0 ? (dashboardView.materielDisponible * 100 / dashboardView.nombreMateriel) : 0}"
|
||||
showValue="true"
|
||||
styleClass="ui-progressbar-success"/>
|
||||
<small style="color: var(--text-color-secondary);">
|
||||
#{dashboardView.materielDisponible} disponibles
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Maintenance</h6>
|
||||
<p class="subtitle">État des maintenances</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid" style="gap: 1rem;">
|
||||
<div class="col-12">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span><i class="pi pi-exclamation-circle" style="color: red;"></i> En retard</span>
|
||||
<strong style="color: red;">#{dashboardView.maintenancesEnRetard}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span><i class="pi pi-calendar"></i> Planifiées</span>
|
||||
<strong>#{dashboardView.maintenancesPlanifiees}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<p:commandButton value="Voir les maintenances" icon="pi pi-cog"
|
||||
outcome="/maintenance"
|
||||
styleClass="ui-button-text" style="width: 100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chantiers récents -->
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Chantiers récents</h6>
|
||||
<p class="subtitle">Derniers chantiers actifs</p>
|
||||
</div>
|
||||
<p:commandButton value="Voir tout" icon="pi pi-arrow-right"
|
||||
<p:commandButton value="Voir tout"
|
||||
icon="pi pi-arrow-right"
|
||||
outcome="/chantiers"
|
||||
styleClass="ui-button-text"/>
|
||||
</div>
|
||||
<p:dataTable value="#{dashboardView.chantiersRecents}" var="chantier"
|
||||
emptyMessage="Aucun chantier récent">
|
||||
<p:column headerText="Nom">
|
||||
|
||||
<p:dataTable value="#{dashboardView.chantiersActifsList}"
|
||||
var="chantier"
|
||||
emptyMessage="Aucun chantier actif pour le moment"
|
||||
styleClass="p-datatable-sm"
|
||||
paginator="true"
|
||||
rows="10"
|
||||
paginatorPosition="bottom">
|
||||
|
||||
<p:column headerText="Nom" sortBy="#{chantier.nom}">
|
||||
<h:outputText value="#{chantier.nom}"/>
|
||||
</p:column>
|
||||
<p:column headerText="Client">
|
||||
|
||||
<p:column headerText="Client" sortBy="#{chantier.client}">
|
||||
<h:outputText value="#{chantier.client}"/>
|
||||
</p:column>
|
||||
<p:column headerText="Date de début">
|
||||
|
||||
<p:column headerText="Date début" sortBy="#{chantier.dateDebut}">
|
||||
<h:outputText value="#{chantier.dateDebutFormatee}"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Fin prévue" sortBy="#{chantier.dateFinPrevue}">
|
||||
<h:outputText value="#{chantier.dateFinPrevueFormatee}"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Avancement">
|
||||
<p:progressBar value="#{chantier.avancement}"
|
||||
showValue="true"
|
||||
styleClass="ui-progressbar-success"/>
|
||||
<p:progressBar value="#{chantier.avancement}"
|
||||
showValue="true"
|
||||
displayValue="#{chantier.avancement}%"
|
||||
styleClass="ui-progressbar-success"/>
|
||||
</p:column>
|
||||
<p:column headerText="Actions">
|
||||
<p:commandButton icon="pi pi-eye" title="Voir les détails"
|
||||
styleClass="ui-button-text"
|
||||
outcome="/chantiers/details?id=#{chantier.id}"/>
|
||||
|
||||
<p:column headerText="Budget" sortBy="#{chantier.budget}">
|
||||
<h:outputText value="#{chantier.budget}">
|
||||
<f:convertNumber type="number" groupingUsed="true"/>
|
||||
</h:outputText>
|
||||
<h:outputText value=" Fcfa"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Coût réel" sortBy="#{chantier.coutReel}">
|
||||
<h:outputText value="#{chantier.coutReel}"
|
||||
style="#{chantier.depassementBudget ? 'color: var(--red-500); font-weight: bold;' : ''}">
|
||||
<f:convertNumber type="number" groupingUsed="true"/>
|
||||
</h:outputText>
|
||||
<h:outputText value=" Fcfa"/>
|
||||
<p:badge value="!" severity="danger"
|
||||
style="margin-left: 0.5rem;"
|
||||
rendered="#{chantier.depassementBudget}"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut">
|
||||
<p:badge value="#{chantier.statut}"
|
||||
severity="#{chantier.statut == 'EN_COURS' ? 'info' : 'success'}"/>
|
||||
</p:column>
|
||||
|
||||
</p:dataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================================
|
||||
SECTION BAS : Chantiers en retard + Maintenances en retard
|
||||
==================================================================== -->
|
||||
|
||||
<!-- Chantiers en retard -->
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Chantiers en retard</h6>
|
||||
<p class="subtitle">Attention requise</p>
|
||||
<p class="subtitle">#{dashboardView.chantiersEnRetardList.size()} chantiers en retard</p>
|
||||
</div>
|
||||
</div>
|
||||
<p:dataList value="#{dashboardView.chantiersEnRetard}" var="chantier"
|
||||
emptyMessage="Aucun chantier en retard">
|
||||
<div class="flex align-items-center justify-content-between" style="padding: 0.75rem; border-bottom: 1px solid var(--surface-border);">
|
||||
<div>
|
||||
<strong>#{chantier.nom}</strong>
|
||||
<br/>
|
||||
<small style="color: var(--text-color-secondary);">
|
||||
#{chantier.dateFinPrevueFormatee}
|
||||
</small>
|
||||
|
||||
<ui:repeat value="#{dashboardView.chantiersEnRetardList}" var="chantier">
|
||||
<div class="chantier-retard-item" style="padding: 1rem; border-bottom: 1px solid var(--surface-border); background: var(--orange-50);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: start;">
|
||||
<div>
|
||||
<h6 style="margin: 0 0 0.5rem 0;">
|
||||
<i class="pi pi-building" style="color: var(--orange-500);"></i>
|
||||
#{chantier.nom}
|
||||
</h6>
|
||||
<p style="margin: 0.25rem 0; font-size: 0.9rem;">
|
||||
<strong>Date fin prévue:</strong> #{chantier.dateFinPrevueFormatee}
|
||||
</p>
|
||||
</div>
|
||||
<p:badge value="+#{chantier.joursRetard}j" severity="warning" size="large"/>
|
||||
</div>
|
||||
<p:tag value="+#{chantier.joursRetard}j" severity="danger"/>
|
||||
</div>
|
||||
</p:dataList>
|
||||
<p:outputPanel rendered="#{empty dashboardView.chantiersEnRetard}">
|
||||
<p style="text-align: center; padding: 1rem; color: var(--text-color-secondary);">
|
||||
<i class="pi pi-check-circle" style="color: green;"></i>
|
||||
Aucun chantier en retard
|
||||
</p>
|
||||
</ui:repeat>
|
||||
|
||||
<p:outputPanel rendered="#{empty dashboardView.chantiersEnRetardList}">
|
||||
<div style="padding: 2rem; text-align: center; color: var(--green-500);">
|
||||
<i class="pi pi-check-circle" style="font-size: 3rem;"></i>
|
||||
<p style="margin-top: 1rem;">Tous les chantiers sont dans les temps</p>
|
||||
</div>
|
||||
</p:outputPanel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Maintenances en retard -->
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Maintenances en retard</h6>
|
||||
<p class="subtitle">#{dashboardView.maintenancesEnRetardList.size()} maintenances urgentes</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ui:repeat value="#{dashboardView.maintenancesEnRetardList}" var="maintenance">
|
||||
<div class="maintenance-item" style="padding: 1rem; border-bottom: 1px solid var(--surface-border); background: var(--red-50);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: start;">
|
||||
<div>
|
||||
<h6 style="margin: 0 0 0.5rem 0;">
|
||||
<i class="pi pi-wrench" style="color: var(--red-500);"></i>
|
||||
#{maintenance.materiel}
|
||||
</h6>
|
||||
<p style="margin: 0.25rem 0; font-size: 0.9rem;">
|
||||
<strong>Type:</strong> #{maintenance.type} •
|
||||
<strong>Prévue:</strong> #{maintenance.datePrevueFormatee}
|
||||
</p>
|
||||
<p style="margin: 0.25rem 0; font-size: 0.85rem; color: var(--text-color-secondary);">
|
||||
#{maintenance.description}
|
||||
</p>
|
||||
</div>
|
||||
<p:badge value="+#{maintenance.joursRetard}j" severity="danger" size="large"/>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
|
||||
<p:outputPanel rendered="#{empty dashboardView.maintenancesEnRetardList}">
|
||||
<div style="padding: 2rem; text-align: center; color: var(--green-500);">
|
||||
<i class="pi pi-check-circle" style="font-size: 3rem;"></i>
|
||||
<p style="margin-top: 1rem;">Toutes les maintenances sont à jour</p>
|
||||
</div>
|
||||
</p:outputPanel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================================
|
||||
SECTION BAS 2 : Disponibilités en attente + Documents récents
|
||||
==================================================================== -->
|
||||
|
||||
<!-- Disponibilités en attente -->
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Disponibilités en attente</h6>
|
||||
<p class="subtitle">#{dashboardView.disponibilitesEnAttenteList.size()} demandes à valider</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ui:repeat value="#{dashboardView.disponibilitesEnAttenteList}" var="dispo">
|
||||
<div class="disponibilite-card" style="padding: 1rem; border-bottom: 1px solid var(--surface-border);">
|
||||
<div style="display: flex; justify-content: space-between; align-items: start;">
|
||||
<div style="flex: 1;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
|
||||
<i class="pi pi-user"></i>
|
||||
<strong>#{dispo.employe}</strong>
|
||||
</div>
|
||||
<div style="margin: 0.5rem 0;">
|
||||
<p:badge value="#{dispo.type}"
|
||||
severity="#{dashboardView.getSeveriteDisponibilite(dispo.type)}"/>
|
||||
<span style="margin-left: 0.5rem; font-size: 0.9rem;">
|
||||
Du #{dispo.dateDebutFormatee} au #{dispo.dateFinFormatee}
|
||||
(#{dispo.nombreJours} jours)
|
||||
</span>
|
||||
</div>
|
||||
<small style="color: var(--text-color-secondary);">
|
||||
<strong>Motif:</strong> #{dispo.motif}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
|
||||
<p:outputPanel rendered="#{empty dashboardView.disponibilitesEnAttenteList}">
|
||||
<div style="padding: 2rem; text-align: center; color: var(--text-color-secondary);">
|
||||
<i class="pi pi-inbox" style="font-size: 2rem;"></i>
|
||||
<p style="margin-top: 1rem;">Aucune demande de disponibilité en attente</p>
|
||||
</div>
|
||||
</p:outputPanel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Documents récents -->
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Documents récents</h6>
|
||||
<p class="subtitle">5 derniers documents ajoutés</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="documents-list" style="list-style: none; padding: 0; margin: 0;">
|
||||
<ui:repeat value="#{dashboardView.documentsRecentsList}" var="doc">
|
||||
<li style="padding: 1rem; border-bottom: 1px solid var(--surface-border); display: flex; align-items: center; gap: 1rem;">
|
||||
<i class="#{dashboardView.getIconeDocument(doc.type)}"
|
||||
style="font-size: 2rem; color: var(--primary-color);"></i>
|
||||
<div style="flex: 1;">
|
||||
<div style="font-weight: 500;">#{doc.nom}</div>
|
||||
<small style="color: var(--text-color-secondary);">
|
||||
#{doc.type} • Ajouté le #{doc.dateCreationFormatee}
|
||||
</small>
|
||||
</div>
|
||||
<p:button icon="pi pi-download" styleClass="ui-button-text ui-button-sm"/>
|
||||
</li>
|
||||
</ui:repeat>
|
||||
</ul>
|
||||
|
||||
<p:outputPanel rendered="#{empty dashboardView.documentsRecentsList}">
|
||||
<div style="padding: 2rem; text-align: center; color: var(--text-color-secondary);">
|
||||
<i class="pi pi-file" style="font-size: 2rem;"></i>
|
||||
<p style="margin-top: 1rem;">Aucun document récent</p>
|
||||
</div>
|
||||
</p:outputPanel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user