btpxpress-frontend/target/classes/META-INF/resources/WEB-INF/components/progress-indicator.xhtml

<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:c="http://xmlns.jcp.org/jsp/jstl/core">

    <!--
        Composant réutilisable: Indicateur de progression

        Principe DRY: Un seul composant pour tous les indicateurs de progression

        Paramètres:
        - value: Pourcentage (0-100) - requis
        - label: Libellé à afficher - optionnel
        - showValue: Afficher le pourcentage (true/false - défaut: true)
        - mode: Mode d'affichage (determinate, indeterminate - défaut: determinate)
        - color: Couleur (primary, success, info, warning, danger - défaut: auto basé sur valeur)
        - height: Hauteur de la barre (défaut: 1rem)
        - labelPosition: Position du label (top, inside, bottom - défaut: top)

        Utilisation basique:
        <ui:include src="/WEB-INF/components/progress-indicator.xhtml">
            <ui:param name="value" value="#{chantier.progressionPourcentage}"/>
            <ui:param name="label" value="Progression du chantier"/>
        </ui:include>

        Avec couleur personnalisée:
        <ui:include src="/WEB-INF/components/progress-indicator.xhtml">
            <ui:param name="value" value="75"/>
            <ui:param name="color" value="success"/>
            <ui:param name="labelPosition" value="inside"/>
        </ui:include>

        Mode indéterminé (chargement):
        <ui:include src="/WEB-INF/components/progress-indicator.xhtml">
            <ui:param name="mode" value="indeterminate"/>
            <ui:param name="label" value="Chargement en cours..."/>
        </ui:include>
    -->

    <c:set var="progressMode" value="#{empty mode ? 'determinate' : mode}"/>
    <c:set var="displayValue" value="#{empty showValue ? true : showValue}"/>
    <c:set var="barHeight" value="#{empty height ? '1rem' : height}"/>
    <c:set var="labelPos" value="#{empty labelPosition ? 'top' : labelPosition}"/>

    <!-- Déterminer la couleur automatiquement si non fournie -->
    <c:choose>
        <c:when test="#{not empty color}">
            <c:set var="barColor" value="#{color}"/>
        </c:when>
        <c:when test="#{value >= 100}">
            <c:set var="barColor" value="success"/>
        </c:when>
        <c:when test="#{value >= 75}">
            <c:set var="barColor" value="info"/>
        </c:when>
        <c:when test="#{value >= 50}">
            <c:set var="barColor" value="primary"/>
        </c:when>
        <c:when test="#{value >= 25}">
            <c:set var="barColor" value="warning"/>
        </c:when>
        <c:otherwise>
            <c:set var="barColor" value="danger"/>
        </c:otherwise>
    </c:choose>

    <!-- Classes CSS pour la couleur -->
    <c:choose>
        <c:when test="#{barColor eq 'success'}">
            <c:set var="colorClass" value="bg-green-500"/>
        </c:when>
        <c:when test="#{barColor eq 'info'}">
            <c:set var="colorClass" value="bg-blue-500"/>
        </c:when>
        <c:when test="#{barColor eq 'warning'}">
            <c:set var="colorClass" value="bg-orange-500"/>
        </c:when>
        <c:when test="#{barColor eq 'danger'}">
            <c:set var="colorClass" value="bg-red-500"/>
        </c:when>
        <c:otherwise>
            <c:set var="colorClass" value="bg-primary"/>
        </c:otherwise>
    </c:choose>

    <div class="progress-indicator-container" style="width: 100%;">
        <!-- Label en haut -->
        <div class="flex align-items-center justify-content-between mb-2"
             style="#{labelPos eq 'top' ? '' : 'display: none;'}">
            <span class="text-900 font-medium">#{label}</span>
            <span class="text-900 font-semibold" style="#{displayValue ? '' : 'display: none;'}">
                #{value}%
            </span>
        </div>

        <!-- Barre de progression -->
        <p:progressBar value="#{value}"
                       mode="#{progressMode}"
                       style="height: #{barHeight}; border-radius: 0.5rem;"
                       styleClass="#{colorClass}"
                       displayValue="#{labelPos eq 'inside' and displayValue}"/>

        <!-- Label en bas -->
        <div class="flex align-items-center justify-content-between mt-2"
             style="#{labelPos eq 'bottom' ? '' : 'display: none;'}">
            <span class="text-700">#{label}</span>
            <span class="text-900 font-semibold" style="#{displayValue ? '' : 'display: none;'}">
                #{value}%
            </span>
        </div>
    </div>

</ui:composition>