terminado banner fidelidad

src/main/java/com/imprimelibros/erp/home/HomeController.java

@@ -7,13 +7,18 @@ import org.springframework.web.bind.annotation.GetMapping;
 
 import com.imprimelibros.erp.configurationERP.VariableService;
 import com.imprimelibros.erp.i18n.TranslationService;
+import com.imprimelibros.erp.pedidos.Pedido;
+import com.imprimelibros.erp.pedidos.PedidoRepository;
 
 import org.springframework.security.authentication.AnonymousAuthenticationToken;
 import org.springframework.security.core.Authentication;
 
+import java.security.Principal;
+import java.time.Instant;
 import java.util.List;
 import java.util.Locale;
 import java.util.Map;
+import com.imprimelibros.erp.common.Utils;
 
 @Controller
 public class HomeController {
@@ -22,9 +27,10 @@ public class HomeController {
     private TranslationService translationService;
     @Autowired
     private VariableService variableService;
+    @Autowired PedidoRepository pedidoRepository;
 
     @GetMapping("/")
-    public String index(Model model, Authentication authentication, Locale locale) {
+    public String index(Model model, Authentication authentication, Principal principal,Locale locale) {
 
         boolean isAuthenticated = authentication != null && authentication.isAuthenticated()
                 && !(authentication instanceof AnonymousAuthenticationToken);
@@ -37,7 +43,8 @@ public class HomeController {
                     "presupuesto.impresion-cubierta",
                     "presupuesto.impresion-cubierta-help",
                     "presupuesto.iva-reducido",
-                    "presupuesto.iva-reducido-descripcion");
+                    "presupuesto.iva-reducido-descripcion", 
+                    "pedido.gasto-anual");
 
             Map<String, String> translations = translationService.getTranslations(locale, keys);
             model.addAttribute("languageBundle", translations);
@@ -51,6 +58,11 @@ public class HomeController {
             // empty translations for authenticated users
             Map<String, String> translations = Map.of();
             model.addAttribute("languageBundle", translations);
+
+            Instant haceUnAno = Instant.now().minusSeconds(365 * 24 * 60 * 60);
+            Long userId = Utils.currentUserId(principal);
+            double totalGastado = pedidoRepository.sumTotalByCreatedByAndCreatedAtAfter(userId, haceUnAno);
+            model.addAttribute("totalGastado", totalGastado);
         }
         return "imprimelibros/home/home";
     }

src/main/resources/i18n/pedidos_es.properties

@@ -51,6 +51,8 @@ pedido.table.importe=Importe
 pedido.table.estado=Estado
 pedido.table.acciones=Acciones
 
+pedido.gasto-anual=Gasto últimos 12 meses
+
 pedido.view.tirada=Tirada
 pedido.view.view-presupuesto=Ver presupuesto
 pedido.view.aceptar-ferro=Aceptar ferro

src/main/resources/static/assets/css/home.css

@@ -215,12 +215,24 @@
   opacity: .95;
 }
 
-.ib-rewards-grid {
+.ib-rewards-grid{
   display: grid;
   gap: 10px;
 
-  /* auto-fit: se adapta solo */
+  /* Nunca más de 3 columnas, pero baja si no hay sitio */
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  grid-template-columns: repeat(3, minmax(160px, 1fr));
+}
+
+@media (max-width: 992px){
+  .ib-rewards-grid{
+    grid-template-columns: repeat(2, minmax(160px, 1fr));
+  }
+}
+
+@media (max-width: 520px){
+  .ib-rewards-grid{
+    grid-template-columns: 1fr;
+  }
 }
 
 .ib-card {
@@ -309,4 +321,52 @@
     width: 32px;
     height: 32px;
   }
-}
+}
+
+.ib-loyalty-left{
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  height: 100%;
+}
+
+.ib-loyalty-stat-card{
+  
+  /* centra en el espacio libre */
+  margin-top: auto;
+  margin-bottom: auto;
+
+  margin-left: auto;
+  margin-right: auto;
+
+
+  /* mismo look que el hero */
+  background: var(--banner-panel-bg);
+  border: 2px solid var(--banner-panel-border);
+  border-radius: var(--radius-lg);
+
+  padding: 22px;
+  max-width: 360px;        /* evita que se haga enorme */
+}
+
+.ib-loyalty-stat-card h6{
+  letter-spacing: .4px;
+  margin-bottom: 12px;
+}
+
+.ib-loyalty-stat-card h2{
+  font-weight: 800;
+}
+
+.ib-loyalty-stat-card i{
+  opacity: .85;
+}
+
+@media (max-width: 1100px){
+  .ib-loyalty-stat-card{
+    margin-top: 12px;
+    margin-bottom: 0;
+    max-width: 100%;
+  }
+}
+

src/main/resources/static/assets/js/pages/imprimelibros/counter-widget.js

@@ -0,0 +1,34 @@
+import {formateaMoneda} from "./utils.js";
+
+$(() => {
+    // Contador animado
+    function counter() {
+        var counter = document.querySelectorAll(".counter-value");
+        var speed = 250; // The lower the slower
+        counter &&
+            Array.from(counter).forEach(function (counter_value) {
+                function updateCount() {
+                    var target = +counter_value.getAttribute("data-target");
+                    var count = +counter_value.innerText;
+                    var inc = target / speed;
+                    if (inc < 1) {
+                        inc = 1;
+                    }
+                    // Check if target is reached
+                    if (count < target) {
+                        // Add inc to count and output in counter_value
+                        counter_value.innerText = (count + inc).toFixed(0);
+                        // Call function every ms
+                        setTimeout(updateCount, 1);
+                    } else {
+                        counter_value.innerText = formateaMoneda(target);
+                    }
+                    formateaMoneda(counter_value.innerText);
+                }
+                updateCount();
+            });
+
+    }
+    counter();
+
+})

src/main/resources/templates/imprimelibros/home/home-container-user.html

@@ -1,71 +1,105 @@
 <div id="fidelity-banner" th:fragment="home-container-user">
 
-    <div class="ib-loyalty-banner">
+  <div class="ib-loyalty-banner">
-        <!-- Decoraciones -->
-        <div class="decor"></div>
-        <div class="book small"></div>
 
-        <div class="ib-loyalty-inner">
+    <!-- Decoraciones -->
-            <!-- Panel principal -->
+    <div class="decor"></div>
-            <div class="ib-loyalty-hero">
+    <div class="book small"></div>
-                <div class="ib-loyalty-head">
-                    <div class="ib-loyalty-logo">
-                        <img src="/assets/images/logo-sm.png" alt="Logo" />
-                    </div>
 
-                    <div>
+    <div class="ib-loyalty-inner">
-                        <h3 class="ib-loyalty-title">Programa de Fidelidad</h3>
+
-                        <p class="ib-loyalty-sub">
+      <!-- ===================== -->
-                            Aumenta tus compras en los últimos 12 meses y obtén descuentos automáticos.
+      <!-- COLUMNA IZQUIERDA -->
-                        </p>
+      <!-- ===================== -->
-                    </div>
+      <div class="ib-loyalty-left">
-                </div>
+
+        <!-- PANEL SUPERIOR: TÍTULO -->
+        <div class="ib-loyalty-hero">
+          <div class="ib-loyalty-head">
+            <div class="ib-loyalty-logo">
+              <img src="/assets/images/logo-sm.png" alt="Logo" />
             </div>
 
-            <!-- Rewards -->
+            <div>
-            <div class="ib-rewards">
+              <h3 class="ib-loyalty-title">Programa de Fidelidad</h3>
-                <h6>Recompensas</h6>
+              <p class="ib-loyalty-sub">
-
+                Aumenta tus compras en los últimos 12 meses y obtén descuentos automáticos.
-                <div class="ib-rewards-grid">
+              </p>
-                    <div class="ib-card ">
-                        <div class="range">Menos de 1.200€</div>
-                        <div class="percent">0%</div>
-                        <span class="chip">Descuento</span>
-                    </div>
-
-                    <div class="ib-card">
-                        <div class="range">1.200€ – 1.999€</div>
-                        <div class="percent">1%</div>
-                        <span class="chip">Descuento</span>
-                    </div>
-
-                    <div class="ib-card">
-                        <div class="range">2.000€ – 2.999€</div>
-                        <div class="percent">2%</div>
-                        <span class="chip">Descuento</span>
-                    </div>
-
-                    <div class="ib-card">
-                        <div class="range">3.000€ – 3.999€</div>
-                        <div class="percent">3%</div>
-                        <span class="chip">Descuento</span>
-                    </div>
-
-                    <div class="ib-card">
-                        <div class="range">4.000€ – 4.999€</div>
-                        <div class="percent">4%</div>
-                        <span class="chip">Descuento</span>
-                    </div>
-
-                    <div class="ib-card">
-                        <div class="range">más de 5.000€</div>
-                        <div class="percent">5%</div>
-                        <span class="chip">Descuento</span>
-                    </div>
-                </div>
             </div>
+          </div>
         </div>
+
+        <!-- PANEL INFERIOR: ESTADÍSTICA (RECUADRO INDEPENDIENTE) -->
+        <div class="ib-loyalty-stat-card">
+
+          <h6 class="text-uppercase fs-13 mb-3">
+            <span th:text="#{pedido.gasto-anual}">Gasto últimos 12 meses</span>
+            <i class="ri-arrow-up-circle-line text-success fs-18 float-end align-middle"></i>
+          </h6>
+
+          <div class="d-flex align-items-center">
+            <div class="flex-shrink-0">
+              <i class="ri-money-euro-circle-line display-6 "></i>
+            </div>
+            <div class="flex-grow-1 ms-3">
+              <h2 class="mb-0">
+                <h2 class="mb-0"><span class="counter-value" th:attr="data-target=${totalGastado}">0</span></h2>
+              </h2>
+            </div>
+          </div>
+
+        </div>
+
+      </div>
+
+      <!-- ===================== -->
+      <!-- COLUMNA DERECHA -->
+      <!-- ===================== -->
+      <div class="ib-rewards">
+
+        <h6>Recompensas</h6>
+
+        <div class="ib-rewards-grid">
+
+          <div class="ib-card">
+            <div class="range">Menos de 1.200€</div>
+            <div class="percent">0%</div>
+            <span class="chip">Descuento</span>
+          </div>
+
+          <div class="ib-card">
+            <div class="range">1.200€ – 1.999€</div>
+            <div class="percent">1%</div>
+            <span class="chip">Descuento</span>
+          </div>
+
+          <div class="ib-card">
+            <div class="range">2.000€ – 2.999€</div>
+            <div class="percent">2%</div>
+            <span class="chip">Descuento</span>
+          </div>
+
+          <div class="ib-card">
+            <div class="range">3.000€ – 3.999€</div>
+            <div class="percent">3%</div>
+            <span class="chip">Descuento</span>
+          </div>
+
+          <div class="ib-card">
+            <div class="range">4.000€ – 4.999€</div>
+            <div class="percent">4%</div>
+            <span class="chip">Descuento</span>
+          </div>
+
+          <div class="ib-card">
+            <div class="range">Más de 5.000€</div>
+            <div class="percent">5%</div>
+            <span class="chip">Descuento</span>
+          </div>
+
+        </div>
+      </div>
+
     </div>
-
+  </div>
-
+</div>
-</div>

src/main/resources/templates/imprimelibros/home/home.html

@@ -43,6 +43,9 @@
             <script type="module"
                 th:src="@{/assets/js/pages/imprimelibros/presupuestador/presupuesto-marcapaginas.js}"></script>
         </div>
+        <div th:if="${#authorization.expression('isAuthenticated()')}">
+            <script type="module" th:src="@{/assets/js/pages/imprimelibros/counter-widget.js}"></script>
+        </div>
         <script th:inline="javascript">
             window.languageBundle = /*[[${languageBundle}]]*/ {};
         </script>