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.
98 lines
5.3 KiB
HTML
98 lines
5.3 KiB
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"
|
|
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>
|
|
|