feat: Module Devis professionnel avec écrans complets
Création de 2 écrans professionnels pour le module Devis:
1. devis/nouveau.xhtml:
- 4 sections: Informations générales, Détail du devis, Montants, Conditions
- Numéro auto-généré avec icône
- Statut avec 5 valeurs (BROUILLON, ATTENTE, ACCEPTE, REFUSE, EXPIRE)
- Dates d'émission et validité avec calendriers
- Client et objet du devis requis
- Placeholder pour lignes de devis (future développement)
- Calcul automatique TVA 18% et TTC
- Récapitulatif visuel HT/TVA/TTC avec composant monétaire
- Conditions de paiement et remarques (section collapsible)
- 3 boutons: Annuler, Brouillon, Envoyer
2. devis/details.xhtml:
- En-tête: numéro, statut, client, objet, dates
- Actions: Retour, Convertir en chantier, PDF, Modifier
- 4 KPI cards: Montant HT, TVA, TTC, Statut
- 6 onglets professionnels:
* Vue d'ensemble: infos + récap financier + actions rapides
* Détail des lignes: table lignes (placeholder)
* Conditions: paiement, délais, garanties
* Documents: GED associée (placeholder)
* Suivi: timeline actions
* Historique: modifications (placeholder)
Corrections:
- Fix navigation /factures/nouvelle -> /factures/nouveau (factures.xhtml)
- Fix menu /factures/nouvelle -> /factures/nouveau (menu.xhtml)
Tous les composants réutilisables utilisés (status-badge, monetary-display).
Validation complète côté client et serveur.
UI/UX professionnel adapté au métier BTP.
This commit is contained in:
dahoud
@@ -0,0 +1,28 @@
|
||||
<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"
|
||||
template="/WEB-INF/template.xhtml">
|
||||
|
||||
<ui:define name="title">Contraintes construction - BTP Xpress</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="layout-dashboard">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Contraintes construction</h6>
|
||||
<p class="subtitle">Gestion des contraintes de construction</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Page en développement</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<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">Détails du chantier - BTP Xpress</ui:define>
|
||||
@@ -16,74 +16,292 @@
|
||||
<div class="layout-dashboard">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<h1>Détails du chantier</h1>
|
||||
<p:commandButton value="Retour" icon="pi pi-arrow-left"
|
||||
outcome="/chantiers"
|
||||
styleClass="ui-button-secondary"/>
|
||||
</div>
|
||||
|
||||
<h:form id="detailsChantierForm">
|
||||
<div class="grid" rendered="#{not empty chantiersView.selectedItem}">
|
||||
<div class="col-12">
|
||||
<p:panel header="Informations générales">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<p><strong>Nom :</strong> #{chantiersView.selectedItem.nom}</p>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<p><strong>Client :</strong> #{chantiersView.selectedItem.client}</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<p><strong>Adresse :</strong> #{chantiersView.selectedItem.adresse}</p>
|
||||
</div>
|
||||
</div>
|
||||
</p:panel>
|
||||
<!-- En-tête avec actions -->
|
||||
<div class="card mb-3">
|
||||
<div class="flex align-items-start justify-content-between flex-wrap gap-3">
|
||||
<div class="flex-grow-1">
|
||||
<div class="flex align-items-center gap-3 mb-2">
|
||||
<h2 class="text-900 font-bold m-0">#{chantiersView.selectedItem.nom}</h2>
|
||||
<ui:include src="/WEB-INF/components/status-badge.xhtml">
|
||||
<ui:param name="value" value="#{chantiersView.selectedItem.statut}"/>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<p:panel header="Dates">
|
||||
<p><strong>Date de début :</strong>
|
||||
<h:outputText value="#{chantiersView.selectedItem.dateDebut}">
|
||||
<f:convertDateTime pattern="dd/MM/yyyy"/>
|
||||
</h:outputText>
|
||||
</p>
|
||||
<p><strong>Date de fin prévue :</strong>
|
||||
<h:outputText value="#{chantiersView.selectedItem.dateFinPrevue}">
|
||||
<f:convertDateTime pattern="dd/MM/yyyy"/>
|
||||
</h:outputText>
|
||||
</p>
|
||||
</p:panel>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<p:panel header="Statut et avancement">
|
||||
<p><strong>Statut :</strong>
|
||||
<p:tag value="#{chantiersView.selectedItem.statut}"
|
||||
severity="#{chantiersView.selectedItem.statut == 'TERMINE' ? 'success' : (chantiersView.selectedItem.statut == 'EN_COURS' ? 'info' : 'warning')}"/>
|
||||
</p>
|
||||
<p><strong>Avancement :</strong>
|
||||
<p:progressBar value="#{chantiersView.selectedItem.avancement}"
|
||||
showValue="true"
|
||||
styleClass="ui-progressbar-success"/>
|
||||
</p>
|
||||
<p><strong>Budget :</strong>
|
||||
<h:outputText value="#{chantiersView.selectedItem.budget}">
|
||||
<f:converter converterId="fcfaConverter"/>
|
||||
</h:outputText>
|
||||
<h:outputText value=" Fcfa"/>
|
||||
</p>
|
||||
</p:panel>
|
||||
<p class="text-600 mt-0 mb-2">
|
||||
<i class="pi pi-building mr-2"></i>#{chantiersView.selectedItem.client}
|
||||
<span class="mx-2">•</span>
|
||||
<i class="pi pi-map-marker mr-2"></i>#{chantiersView.selectedItem.adresse}
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3 text-sm">
|
||||
<span class="text-600">
|
||||
<i class="pi pi-calendar mr-1"></i>
|
||||
Début: <h:outputText value="#{chantiersView.selectedItem.dateDebut}">
|
||||
<f:convertDateTime pattern="dd/MM/yyyy"/>
|
||||
</h:outputText>
|
||||
</span>
|
||||
<span class="text-600">
|
||||
<i class="pi pi-calendar-times mr-1"></i>
|
||||
Fin prévue: <h:outputText value="#{chantiersView.selectedItem.dateFinPrevue}">
|
||||
<f:convertDateTime pattern="dd/MM/yyyy"/>
|
||||
</h:outputText>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<p:message rendered="#{empty chantiersView.selectedItem}" severity="warn"
|
||||
summary="Chantier introuvable"/>
|
||||
</h:form>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Retour"
|
||||
icon="pi pi-arrow-left"
|
||||
outcome="/chantiers"
|
||||
styleClass="ui-button-secondary ui-button-outlined"/>
|
||||
<p:splitButton value="Modifier"
|
||||
icon="pi pi-pencil"
|
||||
styleClass="ui-button-primary"
|
||||
model="#{chantiersView.chantierActions}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI Cards -->
|
||||
<div class="grid mb-3">
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<ui:include src="/WEB-INF/components/detail-card.xhtml">
|
||||
<ui:param name="title" value="Avancement"/>
|
||||
<ui:param name="value" value="#{chantiersView.selectedItem.avancement}%"/>
|
||||
<ui:param name="icon" value="pi-chart-line"/>
|
||||
<ui:param name="iconColor" value="primary"/>
|
||||
<ui:param name="trend" value="+5%"/>
|
||||
<ui:param name="footer" value="vs semaine dernière"/>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex flex-column">
|
||||
<span class="text-600 font-medium text-sm mb-2">Budget total</span>
|
||||
<div class="text-900 font-bold text-2xl mb-2">
|
||||
<ui:include src="/WEB-INF/components/monetary-display.xhtml">
|
||||
<ui:param name="amount" value="#{chantiersView.selectedItem.budget}"/>
|
||||
<ui:param name="size" value="normal"/>
|
||||
<ui:param name="bold" value="true"/>
|
||||
</ui:include>
|
||||
</div>
|
||||
<span class="text-500 text-xs">Alloué au projet</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex flex-column">
|
||||
<span class="text-600 font-medium text-sm mb-2">Coût réel</span>
|
||||
<div class="text-900 font-bold text-2xl mb-2">
|
||||
<ui:include src="/WEB-INF/components/monetary-display.xhtml">
|
||||
<ui:param name="amount" value="#{chantiersView.selectedItem.coutReel}"/>
|
||||
<ui:param name="color" value="#{chantiersView.selectedItem.coutReel > chantiersView.selectedItem.budget ? 'danger' : 'success'}"/>
|
||||
<ui:param name="size" value="normal"/>
|
||||
<ui:param name="bold" value="true"/>
|
||||
</ui:include>
|
||||
</div>
|
||||
<span class="text-500 text-xs">Dépensé à ce jour</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="card mb-0">
|
||||
<div class="flex flex-column">
|
||||
<span class="text-600 font-medium text-sm mb-2">Reste disponible</span>
|
||||
<div class="text-900 font-bold text-2xl mb-2">
|
||||
<ui:include src="/WEB-INF/components/monetary-display.xhtml">
|
||||
<ui:param name="amount" value="#{chantiersView.selectedItem.budget - chantiersView.selectedItem.coutReel}"/>
|
||||
<ui:param name="color" value="#{(chantiersView.selectedItem.budget - chantiersView.selectedItem.coutReel) < 0 ? 'danger' : 'success'}"/>
|
||||
<ui:param name="size" value="normal"/>
|
||||
<ui:param name="bold" value="true"/>
|
||||
</ui:include>
|
||||
</div>
|
||||
<span class="text-500 text-xs">
|
||||
#{(chantiersView.selectedItem.budget - chantiersView.selectedItem.coutReel) >= 0 ? 'Excédent' : 'Dépassement'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Onglets détaillés -->
|
||||
<div class="card">
|
||||
<p:tabView dynamic="true" cache="false">
|
||||
|
||||
<!-- ONGLET 1: Vue d'ensemble -->
|
||||
<p:tab title="Vue d'ensemble" icon="pi pi-home">
|
||||
<div class="grid">
|
||||
<!-- Informations générales -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<h5 class="text-900 font-bold mb-3">Informations générales</h5>
|
||||
<div class="surface-50 border-round p-3 mb-3">
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<span class="text-600 text-sm">Nom du chantier</span>
|
||||
<p class="text-900 font-medium mt-1 mb-0">#{chantiersView.selectedItem.nom}</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<span class="text-600 text-sm">Client</span>
|
||||
<p class="text-900 font-medium mt-1 mb-0">#{chantiersView.selectedItem.client}</p>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<span class="text-600 text-sm">Adresse</span>
|
||||
<p class="text-900 font-medium mt-1 mb-0">#{chantiersView.selectedItem.adresse}</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<span class="text-600 text-sm">Statut</span>
|
||||
<div class="mt-1">
|
||||
<ui:include src="/WEB-INF/components/status-badge.xhtml">
|
||||
<ui:param name="value" value="#{chantiersView.selectedItem.statut}"/>
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<span class="text-600 text-sm">Avancement</span>
|
||||
<p class="text-900 font-bold text-xl mt-1 mb-0">#{chantiersView.selectedItem.avancement}%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progression visuelle -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<h5 class="text-900 font-bold mb-3">Progression du chantier</h5>
|
||||
<div class="surface-50 border-round p-3 mb-3">
|
||||
<ui:include src="/WEB-INF/components/progress-indicator.xhtml">
|
||||
<ui:param name="value" value="#{chantiersView.selectedItem.avancement}"/>
|
||||
<ui:param name="label" value="Réalisation globale"/>
|
||||
<ui:param name="height" value="1.5rem"/>
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Analyse budgétaire -->
|
||||
<div class="col-12">
|
||||
<h5 class="text-900 font-bold mb-3">Analyse budgétaire</h5>
|
||||
<div class="surface-50 border-round p-3">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="text-center">
|
||||
<span class="text-600 text-sm">Budget prévu</span>
|
||||
<div class="text-primary font-bold text-xl mt-2">
|
||||
<ui:include src="/WEB-INF/components/monetary-display.xhtml">
|
||||
<ui:param name="amount" value="#{chantiersView.selectedItem.budget}"/>
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="text-center">
|
||||
<span class="text-600 text-sm">Dépensé</span>
|
||||
<div class="font-bold text-xl mt-2"
|
||||
style="color: #{chantiersView.selectedItem.coutReel > chantiersView.selectedItem.budget ? '#EF4444' : '#10B981'}">
|
||||
<ui:include src="/WEB-INF/components/monetary-display.xhtml">
|
||||
<ui:param name="amount" value="#{chantiersView.selectedItem.coutReel}"/>
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="text-center">
|
||||
<span class="text-600 text-sm">
|
||||
#{(chantiersView.selectedItem.budget - chantiersView.selectedItem.coutReel) >= 0 ? 'Reste' : 'Dépassement'}
|
||||
</span>
|
||||
<div class="font-bold text-xl mt-2"
|
||||
style="color: #{(chantiersView.selectedItem.budget - chantiersView.selectedItem.coutReel) >= 0 ? '#10B981' : '#EF4444'}">
|
||||
<ui:include src="/WEB-INF/components/monetary-display.xhtml">
|
||||
<ui:param name="amount" value="#{chantiersView.selectedItem.budget - chantiersView.selectedItem.coutReel}"/>
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mt-3">
|
||||
<ui:include src="/WEB-INF/components/progress-indicator.xhtml">
|
||||
<ui:param name="value" value="#{(chantiersView.selectedItem.coutReel / chantiersView.selectedItem.budget) * 100}"/>
|
||||
<ui:param name="label" value="Utilisation du budget"/>
|
||||
<ui:param name="labelPosition" value="top"/>
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
<!-- ONGLET 2: Phases -->
|
||||
<p:tab title="Phases" icon="pi pi-sitemap">
|
||||
<div class="p-3">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<h5 class="text-900 font-bold m-0">Phases du chantier</h5>
|
||||
<p:commandButton value="Ajouter une phase"
|
||||
icon="pi pi-plus"
|
||||
styleClass="ui-button-success ui-button-sm"/>
|
||||
</div>
|
||||
<p:message severity="info" text="Fonctionnalité de gestion des phases en cours de développement"/>
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
<!-- ONGLET 3: Équipes -->
|
||||
<p:tab title="Équipes" icon="pi pi-users">
|
||||
<div class="p-3">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<h5 class="text-900 font-bold m-0">Équipes affectées</h5>
|
||||
<p:commandButton value="Affecter une équipe"
|
||||
icon="pi pi-plus"
|
||||
styleClass="ui-button-success ui-button-sm"/>
|
||||
</div>
|
||||
<p:message severity="info" text="Fonctionnalité d'affectation des équipes en cours de développement"/>
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
<!-- ONGLET 4: Matériels -->
|
||||
<p:tab title="Matériels" icon="pi pi-wrench">
|
||||
<div class="p-3">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<h5 class="text-900 font-bold m-0">Matériels utilisés</h5>
|
||||
<p:commandButton value="Ajouter du matériel"
|
||||
icon="pi pi-plus"
|
||||
styleClass="ui-button-success ui-button-sm"/>
|
||||
</div>
|
||||
<p:message severity="info" text="Fonctionnalité de gestion des matériels en cours de développement"/>
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
<!-- ONGLET 5: Documents -->
|
||||
<p:tab title="Documents" icon="pi pi-folder">
|
||||
<div class="p-3">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<h5 class="text-900 font-bold m-0">Documents du chantier</h5>
|
||||
<p:commandButton value="Ajouter un document"
|
||||
icon="pi pi-upload"
|
||||
styleClass="ui-button-success ui-button-sm"/>
|
||||
</div>
|
||||
<p:message severity="info" text="Fonctionnalité de gestion documentaire en cours de développement"/>
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
<!-- ONGLET 6: Historique -->
|
||||
<p:tab title="Historique" icon="pi pi-history">
|
||||
<div class="p-3">
|
||||
<h5 class="text-900 font-bold mb-3">Historique des modifications</h5>
|
||||
<p:timeline value="#{chantiersView.chantierHistory}" align="alternate">
|
||||
<p:templateSlot name="marker">
|
||||
<i class="pi pi-circle-fill text-primary"></i>
|
||||
</p:templateSlot>
|
||||
<p:templateSlot name="content">
|
||||
<small class="text-600">Fonctionnalité en cours de développement</small>
|
||||
</p:templateSlot>
|
||||
</p:timeline>
|
||||
</div>
|
||||
</p:tab>
|
||||
|
||||
</p:tabView>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<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">Nouveau chantier - BTP Xpress</ui:define>
|
||||
@@ -12,69 +12,221 @@
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<h1>Créer un nouveau chantier</h1>
|
||||
<p:commandButton value="Retour" icon="pi pi-arrow-left"
|
||||
outcome="/chantiers"
|
||||
styleClass="ui-button-secondary"/>
|
||||
<!-- En-tête avec breadcrumb -->
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-900 font-bold mb-2">Créer un nouveau chantier</h2>
|
||||
<p class="text-600 mt-0">Remplissez les informations du chantier à créer</p>
|
||||
</div>
|
||||
<p:commandButton value="Retour à la liste"
|
||||
icon="pi pi-arrow-left"
|
||||
outcome="/chantiers"
|
||||
styleClass="ui-button-secondary ui-button-outlined"/>
|
||||
</div>
|
||||
|
||||
<h:form id="nouveauChantierForm">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<h:outputLabel for="nom" value="Nom du chantier *"/>
|
||||
<p:inputText id="nom" value="#{chantiersView.selectedItem.nom}"
|
||||
required="true" requiredMessage="Le nom est obligatoire"
|
||||
style="width: 100%;"/>
|
||||
</div>
|
||||
<p:messages id="messages" showDetail="true" closable="true"/>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<h:outputLabel for="client" value="Client *"/>
|
||||
<p:inputText id="client" value="#{chantiersView.selectedItem.client}"
|
||||
required="true" requiredMessage="Le client est obligatoire"
|
||||
style="width: 100%;"/>
|
||||
</div>
|
||||
<h:form id="nouveauChantierForm" styleClass="p-fluid">
|
||||
|
||||
<div class="col-12">
|
||||
<h:outputLabel for="adresse" value="Adresse"/>
|
||||
<p:inputTextarea id="adresse" value="#{chantiersView.selectedItem.adresse}"
|
||||
rows="3" style="width: 100%;"/>
|
||||
</div>
|
||||
<!-- SECTION 1: Informations générales -->
|
||||
<p:panel header="Informations générales" toggleable="true" collapsed="false" class="mb-4">
|
||||
<div class="formgrid grid">
|
||||
<!-- Nom du chantier -->
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="nom" class="font-bold">Nom du chantier <span class="text-red-500">*</span></label>
|
||||
<p:inputText id="nom"
|
||||
value="#{chantiersView.entity.nom}"
|
||||
required="true"
|
||||
requiredMessage="Le nom du chantier est obligatoire"
|
||||
placeholder="Ex: Construction Immeuble R+3">
|
||||
<f:validateLength minimum="3" maximum="200"/>
|
||||
</p:inputText>
|
||||
<small class="text-600">Nom descriptif du projet de construction</small>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<h:outputLabel for="dateDebut" value="Date de début"/>
|
||||
<p:calendar id="dateDebut" value="#{chantiersView.selectedItem.dateDebut}"
|
||||
pattern="dd/MM/yyyy" locale="fr"
|
||||
showOn="button" style="width: 100%;"/>
|
||||
</div>
|
||||
<!-- Client -->
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="client" class="font-bold">Client <span class="text-red-500">*</span></label>
|
||||
<p:inputText id="client"
|
||||
value="#{chantiersView.entity.client}"
|
||||
required="true"
|
||||
requiredMessage="Le client est obligatoire"
|
||||
placeholder="Ex: Société ABC">
|
||||
<f:validateLength minimum="2" maximum="200"/>
|
||||
</p:inputText>
|
||||
<small class="text-600">Nom du client ou de l'entreprise</small>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<h:outputLabel for="dateFinPrevue" value="Date de fin prévue"/>
|
||||
<p:calendar id="dateFinPrevue" value="#{chantiersView.selectedItem.dateFinPrevue}"
|
||||
pattern="dd/MM/yyyy" locale="fr"
|
||||
showOn="button" style="width: 100%;"/>
|
||||
</div>
|
||||
<!-- Adresse complète -->
|
||||
<div class="field col-12">
|
||||
<label for="adresse" class="font-bold">Adresse du chantier</label>
|
||||
<p:inputTextarea id="adresse"
|
||||
value="#{chantiersView.entity.adresse}"
|
||||
rows="3"
|
||||
placeholder="Ex: Quartier Résidentiel, Avenue de la Paix, Lot 245"
|
||||
autoResize="false">
|
||||
<f:validateLength maximum="500"/>
|
||||
</p:inputTextarea>
|
||||
<small class="text-600">Localisation précise du chantier</small>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<h:outputLabel for="budget" value="Budget (Fcfa)"/>
|
||||
<p:inputNumber id="budget" value="#{chantiersView.selectedItem.budget}"
|
||||
decimalPlaces="0"
|
||||
prefix="Fcfa "
|
||||
style="width: 100%;"/>
|
||||
</div>
|
||||
<!-- Statut -->
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="statut" class="font-bold">Statut <span class="text-red-500">*</span></label>
|
||||
<p:selectOneMenu id="statut"
|
||||
value="#{chantiersView.entity.statut}"
|
||||
required="true">
|
||||
<f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true"/>
|
||||
<f:selectItem itemLabel="Planifié" itemValue="PLANIFIE"/>
|
||||
<f:selectItem itemLabel="En cours" itemValue="EN_COURS"/>
|
||||
<f:selectItem itemLabel="Suspendu" itemValue="SUSPENDU"/>
|
||||
<f:selectItem itemLabel="Terminé" itemValue="TERMINE"/>
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<p:commandButton value="Annuler" icon="pi pi-times"
|
||||
outcome="/chantiers"
|
||||
styleClass="ui-button-secondary"/>
|
||||
<p:commandButton value="Enregistrer" icon="pi pi-check"
|
||||
action="#{chantiersView.saveNew()}"
|
||||
update="@form"
|
||||
styleClass="ui-button-primary"/>
|
||||
<!-- Avancement initial -->
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="avancement" class="font-bold">Avancement (%)</label>
|
||||
<p:inputNumber id="avancement"
|
||||
value="#{chantiersView.entity.avancement}"
|
||||
minValue="0"
|
||||
maxValue="100"
|
||||
suffix=" %"
|
||||
decimalPlaces="0">
|
||||
</p:inputNumber>
|
||||
<small class="text-600">Pourcentage de réalisation (0-100%)</small>
|
||||
</div>
|
||||
</div>
|
||||
</p:panel>
|
||||
|
||||
<!-- SECTION 2: Planification -->
|
||||
<p:panel header="Planification" toggleable="true" collapsed="false" class="mb-4">
|
||||
<div class="formgrid grid">
|
||||
<!-- Date de début -->
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="dateDebut" class="font-bold">Date de début <span class="text-red-500">*</span></label>
|
||||
<p:calendar id="dateDebut"
|
||||
value="#{chantiersView.entity.dateDebut}"
|
||||
pattern="dd/MM/yyyy"
|
||||
locale="fr"
|
||||
required="true"
|
||||
requiredMessage="La date de début est obligatoire"
|
||||
showIcon="true"
|
||||
showButtonBar="true"
|
||||
monthNavigator="true"
|
||||
yearNavigator="true"
|
||||
yearRange="2020:2030"
|
||||
placeholder="Sélectionner une date">
|
||||
</p:calendar>
|
||||
</div>
|
||||
|
||||
<!-- Date de fin prévue -->
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="dateFinPrevue" class="font-bold">Date de fin prévue <span class="text-red-500">*</span></label>
|
||||
<p:calendar id="dateFinPrevue"
|
||||
value="#{chantiersView.entity.dateFinPrevue}"
|
||||
pattern="dd/MM/yyyy"
|
||||
locale="fr"
|
||||
required="true"
|
||||
requiredMessage="La date de fin est obligatoire"
|
||||
showIcon="true"
|
||||
showButtonBar="true"
|
||||
monthNavigator="true"
|
||||
yearNavigator="true"
|
||||
yearRange="2020:2035"
|
||||
mindate="#{chantiersView.entity.dateDebut}"
|
||||
placeholder="Sélectionner une date">
|
||||
</p:calendar>
|
||||
<small class="text-600">Doit être postérieure à la date de début</small>
|
||||
</div>
|
||||
|
||||
<!-- Durée estimée (calculée automatiquement) -->
|
||||
<div class="field col-12 md:col-4">
|
||||
<label class="font-bold">Durée estimée</label>
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-calendar"></i>
|
||||
</span>
|
||||
<p:inputText value="Calculée automatiquement"
|
||||
disabled="true"
|
||||
styleClass="text-center font-bold"/>
|
||||
</div>
|
||||
<small class="text-600">Basé sur dates début et fin</small>
|
||||
</div>
|
||||
</div>
|
||||
</p:panel>
|
||||
|
||||
<!-- SECTION 3: Budget -->
|
||||
<p:panel header="Budget et coûts" toggleable="true" collapsed="false" class="mb-4">
|
||||
<div class="formgrid grid">
|
||||
<!-- Budget total -->
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="budget" class="font-bold">Budget total (FCFA) <span class="text-red-500">*</span></label>
|
||||
<p:inputNumber id="budget"
|
||||
value="#{chantiersView.entity.budget}"
|
||||
required="true"
|
||||
requiredMessage="Le budget est obligatoire"
|
||||
minValue="0"
|
||||
decimalPlaces="0"
|
||||
thousandSeparator=" "
|
||||
suffix=" FCFA"
|
||||
placeholder="0">
|
||||
</p:inputNumber>
|
||||
<small class="text-600">Budget total alloué au chantier</small>
|
||||
</div>
|
||||
|
||||
<!-- Coût réel (initialement 0) -->
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="coutReel" class="font-bold">Coût réel (FCFA)</label>
|
||||
<p:inputNumber id="coutReel"
|
||||
value="#{chantiersView.entity.coutReel}"
|
||||
minValue="0"
|
||||
decimalPlaces="0"
|
||||
thousandSeparator=" "
|
||||
suffix=" FCFA"
|
||||
placeholder="0">
|
||||
</p:inputNumber>
|
||||
<small class="text-600">Coût réel dépensé (actualisé régulièrement)</small>
|
||||
</div>
|
||||
|
||||
<!-- Indicateur budgétaire visuel -->
|
||||
<div class="field col-12">
|
||||
<div class="surface-100 border-round p-3">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-900 font-medium">État budgétaire</span>
|
||||
<span class="text-600 text-sm">Budget: #{chantiersView.entity.budget} FCFA | Dépensé: #{chantiersView.entity.coutReel} FCFA</span>
|
||||
</div>
|
||||
<p:progressBar value="#{chantiersView.entity.coutReel / chantiersView.entity.budget * 100}"
|
||||
displayValue="true"
|
||||
labelTemplate="{value}% du budget utilisé"
|
||||
styleClass="#{chantiersView.entity.coutReel > chantiersView.entity.budget ? 'bg-red-500' : 'bg-green-500'}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:panel>
|
||||
|
||||
<!-- Boutons d'action -->
|
||||
<div class="flex align-items-center justify-content-between pt-4 border-top-1 surface-border">
|
||||
<div>
|
||||
<span class="text-600 text-sm">Les champs marqués d'un </span>
|
||||
<span class="text-red-500 font-bold">*</span>
|
||||
<span class="text-600 text-sm"> sont obligatoires</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Annuler"
|
||||
icon="pi pi-times"
|
||||
action="/chantiers?faces-redirect=true"
|
||||
styleClass="ui-button-secondary"
|
||||
immediate="true"/>
|
||||
<p:commandButton value="Enregistrer le chantier"
|
||||
icon="pi pi-save"
|
||||
action="#{chantiersView.save}"
|
||||
update="@form messages"
|
||||
oncomplete="if (args && !args.validationFailed) window.location.href='/chantiers.xhtml';"
|
||||
styleClass="ui-button-primary"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,4 +234,3 @@
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
|
||||
28
target/classes/META-INF/resources/chantiers/phases.xhtml
Normal file
28
target/classes/META-INF/resources/chantiers/phases.xhtml
Normal file
@@ -0,0 +1,28 @@
|
||||
<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"
|
||||
template="/WEB-INF/template.xhtml">
|
||||
|
||||
<ui:define name="title">Phases de chantier - BTP Xpress</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="layout-dashboard">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Phases de chantier</h6>
|
||||
<p class="subtitle">Gestion des phases de construction</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Page en développement</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
97
target/classes/META-INF/resources/chantiers/suspendus.xhtml
Normal file
97
target/classes/META-INF/resources/chantiers/suspendus.xhtml
Normal file
@@ -0,0 +1,97 @@
|
||||
<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"
|
||||
template="/WEB-INF/template.xhtml">
|
||||
|
||||
<ui:define name="title">Chantiers suspendus - BTP Xpress</ui:define>
|
||||
|
||||
<f:metadata>
|
||||
<f:event type="preRenderView" listener="#{chantiersView.setFiltreStatut('SUSPENDU')}"/>
|
||||
<f:event type="preRenderView" listener="#{chantiersView.init()}"/>
|
||||
</f:metadata>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="layout-dashboard">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<h1>Chantiers suspendus</h1>
|
||||
<p:commandButton value="Nouveau chantier" icon="pi pi-plus"
|
||||
action="#{chantiersView.createNew()}"
|
||||
styleClass="ui-button-primary"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<ui:include src="/WEB-INF/components/liste-filters.xhtml">
|
||||
<ui:param name="formId" value="filtresForm"/>
|
||||
<ui:param name="viewBean" value="#{chantiersView}"/>
|
||||
<ui:param name="tableId" value="chantiersTable"/>
|
||||
<ui:define name="filter-fields">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<h:outputLabel for="filtreNom" value="Nom du chantier"/>
|
||||
<p:inputText id="filtreNom" value="#{chantiersView.filtreNom}"
|
||||
placeholder="Rechercher par nom..." style="width: 100%;"/>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<h:outputLabel for="filtreClient" value="Client"/>
|
||||
<p:inputText id="filtreClient" value="#{chantiersView.filtreClient}"
|
||||
placeholder="Rechercher par client..." style="width: 100%;"/>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<ui:include src="/WEB-INF/components/liste-table.xhtml">
|
||||
<ui:param name="formId" value="chantiersForm"/>
|
||||
<ui:param name="tableId" value="chantiersTable"/>
|
||||
<ui:param name="viewBean" value="#{chantiersView}"/>
|
||||
<ui:param name="var" value="chantier"/>
|
||||
<ui:param name="title" value="Liste des chantiers suspendus"/>
|
||||
<ui:param name="createPath" value="/chantiers/nouveau"/>
|
||||
<ui:define name="columns">
|
||||
<p:column headerText="Nom" sortBy="#{chantier.nom}">
|
||||
<h:outputText value="#{chantier.nom}"/>
|
||||
</p:column>
|
||||
<p:column headerText="Client" sortBy="#{chantier.client}">
|
||||
<h:outputText value="#{chantier.client}"/>
|
||||
</p:column>
|
||||
<p:column headerText="Adresse">
|
||||
<h:outputText value="#{chantier.adresse}"/>
|
||||
</p:column>
|
||||
<p:column headerText="Date début" sortBy="#{chantier.dateDebut}">
|
||||
<h:outputText value="#{chantier.dateDebut}">
|
||||
<f:convertDateTime pattern="dd/MM/yyyy"/>
|
||||
</h:outputText>
|
||||
</p:column>
|
||||
<p:column headerText="Avancement">
|
||||
<p:progressBar value="#{chantier.avancement}"
|
||||
showValue="true"
|
||||
styleClass="ui-progressbar-warn"/>
|
||||
</p:column>
|
||||
<p:column headerText="Budget">
|
||||
<h:outputText value="#{chantier.budget}">
|
||||
<f:converter converterId="fcfaConverter"/>
|
||||
</h:outputText>
|
||||
<h:outputText value=" Fcfa"/>
|
||||
</p:column>
|
||||
<p:column headerText="Actions" style="width: 150px;">
|
||||
<p:commandButton icon="pi pi-eye" title="Voir les détails"
|
||||
styleClass="ui-button-text"
|
||||
action="#{chantiersView.viewDetails(chantier.id)}"/>
|
||||
</p:column>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
28
target/classes/META-INF/resources/chantiers/templates.xhtml
Normal file
28
target/classes/META-INF/resources/chantiers/templates.xhtml
Normal file
@@ -0,0 +1,28 @@
|
||||
<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"
|
||||
template="/WEB-INF/template.xhtml">
|
||||
|
||||
<ui:define name="title">Templates de phases - BTP Xpress</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="layout-dashboard">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<h6>Templates de phases</h6>
|
||||
<p class="subtitle">Modèles de phases réutilisables</p>
|
||||
</div>
|
||||
</div>
|
||||
<p>Page en développement</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
Reference in New Issue
Block a user