ec38f6a23a
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.
123 lines
7.6 KiB
HTML
123 lines
7.6 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">Factures - BTP Xpress</ui:define>
|
|
|
|
<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>Gestion des Factures</h1>
|
|
<p:commandButton value="Nouvelle facture" icon="pi pi-plus"
|
|
action="#{factureView.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="#{factureView}"/>
|
|
<ui:param name="tableId" value="facturesTable"/>
|
|
<ui:define name="filter-fields">
|
|
<div class="grid">
|
|
<div class="col-12 md:col-4">
|
|
<h:outputLabel for="filtreNumero" value="Numéro"/>
|
|
<p:inputText id="filtreNumero" value="#{factureView.filtreNumero}"
|
|
placeholder="Rechercher par numéro..." style="width: 100%;"/>
|
|
</div>
|
|
<div class="col-12 md:col-4">
|
|
<h:outputLabel for="filtreClient" value="Client"/>
|
|
<p:inputText id="filtreClient" value="#{factureView.filtreClient}"
|
|
placeholder="Rechercher par client..." style="width: 100%;"/>
|
|
</div>
|
|
<div class="col-12 md:col-4">
|
|
<h:outputLabel for="filtreStatut" value="Statut"/>
|
|
<p:selectOneMenu id="filtreStatut" value="#{factureView.filtreStatut}" style="width: 100%;">
|
|
<f:selectItem itemLabel="Tous" itemValue="TOUS"/>
|
|
<f:selectItem itemLabel="Brouillon" itemValue="BROUILLON"/>
|
|
<f:selectItem itemLabel="Émise" itemValue="EMISE"/>
|
|
<f:selectItem itemLabel="Envoyée" itemValue="ENVOYEE"/>
|
|
<f:selectItem itemLabel="Payée" itemValue="PAYEE"/>
|
|
<f:selectItem itemLabel="En retard" itemValue="EN_RETARD"/>
|
|
<f:selectItem itemLabel="Annulée" itemValue="ANNULEE"/>
|
|
</p:selectOneMenu>
|
|
</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="facturesForm"/>
|
|
<ui:param name="tableId" value="facturesTable"/>
|
|
<ui:param name="viewBean" value="#{factureView}"/>
|
|
<ui:param name="var" value="facture"/>
|
|
<ui:param name="title" value="Liste des factures"/>
|
|
<ui:param name="createPath" value="/factures/nouveau"/>
|
|
<ui:define name="columns">
|
|
<p:column headerText="Numéro" sortBy="#{facture.numero}">
|
|
<h:outputText value="#{facture.numero}"/>
|
|
</p:column>
|
|
<p:column headerText="Objet" sortBy="#{facture.objet}">
|
|
<h:outputText value="#{facture.objet}"/>
|
|
</p:column>
|
|
<p:column headerText="Client" sortBy="#{facture.client}">
|
|
<h:outputText value="#{facture.client}"/>
|
|
</p:column>
|
|
<p:column headerText="Date émission" sortBy="#{facture.dateEmission}">
|
|
<h:outputText value="#{facture.dateEmission}">
|
|
<f:convertDateTime pattern="dd/MM/yyyy"/>
|
|
</h:outputText>
|
|
</p:column>
|
|
<p:column headerText="Date échéance" sortBy="#{facture.dateEcheance}">
|
|
<h:outputText value="#{facture.dateEcheance}">
|
|
<f:convertDateTime pattern="dd/MM/yyyy"/>
|
|
</h:outputText>
|
|
<h:outputText value=" ⚠️" rendered="#{factureView.isEnRetard(facture)}"
|
|
title="Facture en retard" style="color: red;"/>
|
|
</p:column>
|
|
<p:column headerText="Montant TTC">
|
|
<h:outputText value="#{facture.montantTTC}">
|
|
<f:converter converterId="fcfaConverter"/>
|
|
</h:outputText>
|
|
<h:outputText value=" Fcfa"/>
|
|
</p:column>
|
|
<p:column headerText="Montant payé">
|
|
<h:outputText value="#{facture.montantPaye}">
|
|
<f:converter converterId="fcfaConverter"/>
|
|
</h:outputText>
|
|
<h:outputText value=" Fcfa"/>
|
|
</p:column>
|
|
<p:column headerText="Reste à payer">
|
|
<h:outputText value="#{factureView.getMontantRestant(facture)}">
|
|
<f:converter converterId="fcfaConverter"/>
|
|
</h:outputText>
|
|
<h:outputText value=" Fcfa"
|
|
style="#{factureView.getMontantRestant(facture) > 0 ? 'color: red; font-weight: bold;' : ''}"/>
|
|
</p:column>
|
|
<p:column headerText="Statut" sortBy="#{facture.statut}">
|
|
<p:tag value="#{facture.statut}"
|
|
severity="#{facture.statut == 'PAYEE' ? 'success' : (facture.statut == 'ANNULEE' ? 'danger' : (factureView.isEnRetard(facture) ? 'danger' : 'warning'))}"/>
|
|
</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="#{factureView.viewDetails(facture.id)}"/>
|
|
</p:column>
|
|
</ui:define>
|
|
</ui:include>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:define>
|
|
</ui:composition>
|