From fc9598424ed682443bbdf093db3469f54949dfb7 Mon Sep 17 00:00:00 2001
From: Diego <a01705506@tec.mx>
Date: Thu, 10 Jul 2025 21:08:16 -0600
Subject: [PATCH 01/18] avance en  UI

---
 .../css/paginas/formulas/moduloFormulas.css   |   3 +-
 .../paginas/plantillas/moduloPlantillas.css   | 766 ------------------
 .../css/paginas/plantillas/plantillas.css     |  27 +
 .../utils/scripts/paginas/plantillas/json.js  |  22 +
 .../paginas/analisis/generarReporte.ejs       |  25 +
 harvester-app/src/main.js                     |   2 +-
 6 files changed, 77 insertions(+), 768 deletions(-)
 delete mode 100644 harvester-app/src/framework/utils/css/paginas/plantillas/moduloPlantillas.css
 create mode 100644 harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
 create mode 100644 harvester-app/src/framework/utils/scripts/paginas/plantillas/json.js

diff --git a/harvester-app/src/framework/utils/css/paginas/formulas/moduloFormulas.css b/harvester-app/src/framework/utils/css/paginas/formulas/moduloFormulas.css
index e86a75b7..d8d482de 100644
--- a/harvester-app/src/framework/utils/css/paginas/formulas/moduloFormulas.css
+++ b/harvester-app/src/framework/utils/css/paginas/formulas/moduloFormulas.css
@@ -1,5 +1,6 @@
 .ventana-principal {
-  width: 100%
+  width: 100%;
+  height: 100%;
 }
 
 
diff --git a/harvester-app/src/framework/utils/css/paginas/plantillas/moduloPlantillas.css b/harvester-app/src/framework/utils/css/paginas/plantillas/moduloPlantillas.css
deleted file mode 100644
index 48ccceca..00000000
--- a/harvester-app/src/framework/utils/css/paginas/plantillas/moduloPlantillas.css
+++ /dev/null
@@ -1,766 +0,0 @@
-.frame-plantillas,
-.frame-plantillas * {
-  box-sizing: border-box;
-}
-.frame-plantillas {
-  display: flex;
-  flex-direction: row;
-  gap: 125px;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  flex-shrink: 0;
-  position: relative;
-}
-.plantilla {
-  background: var(--box-light, #ffffff);
-  border-radius: 8px;
-  border-style: solid;
-  border-color: rgba(0, 0, 0, 0.2);
-  border-width: 4px;
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  justify-content: space-between;
-  flex-shrink: 0;
-  width: 369px;
-  height: 517px;
-  position: relative;
-}
-.boton-opciones {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  flex-shrink: 0;
-  position: relative;
-  border: none;
-  background: transparent;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 18px;
-  color: #6d6c6c;
-  width: 100%;
-  transition: background 0.2s;
-}
-
-.more-horizontal {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px;
-  border: none;
-  background: blue;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 18px;
-  color: #969696;
-  width: 100%;
-  transition: background 0.2s;
-  flex-shrink: 0;
-  width: 38px;
-  height: 38px;
-  position: relative;
-}
-.nombre-plantilla {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  align-self: stretch;
-  flex-shrink: 0;
-  position: relative;
-  overflow: hidden;
-}
-.nombre-de-plantilla {
-  color: var(#000000);
-  text-align: center;
-  font-family: "SegoeUi-Regular", sans-serif;
-  font-size: 24px;
-  line-height: 112%;
-  letter-spacing: -0.02em;
-  font-weight: 400;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-scroll-container {
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow-y: scroll;
-  scroll-behavior: smooth;
-  padding: px;
-}
-
-
-.ejemplo-preview,
-.ejemplo-preview * {
-  box-sizing: border-box;
-  scroll-behavior: auto;
-}
-.ejemplo-preview {
-  background: var(--blanco, #ffffff);
-  border-radius: 8px;
-  border-style: solid;
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
-}
-.titlulo-ejemplo {
-  color: var(--texto-light, #000000);
-  text-align: center;
-  font-family: "Inter-Regular", sans-serif;
-  font-size: 24px;
-  line-height: 100%;
-  font-weight: 400;
-  position: relative;
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.primer-texto {
-  color: var(--texto-light, #000000);
-  text-align: left;
-  font-family: "Inter-Regular", sans-serif;
-  font-size: 18px;
-  line-height: 100%;
-  font-weight: 400;
-  position: relative;
-  align-self: stretch;
-}
-.preview-grafica {
-  background: var(--iconos-claro, #6d6c6c);
-  border-radius: 8px;
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  align-self: stretch;
-  flex-shrink: 0;
-  height: 400px;
-  position: relative;
-}
-.bar-chart {
-  flex-shrink: 0;
-  width: 25px;
-  height: 25px;
-  position: relative;
-  overflow: visible;
-}
-.sengundo-texto {
-  color: var(--texto-light, #000000);
-  text-align: left;
-  font-family: "Inter-Regular", sans-serif;
-  font-size: 18px;
-  line-height: 100%;
-  font-weight: 400;
-  position: relative;
-  align-self: stretch;
-}
-
-.frame-btn-Editar,
-.frame-btn-Editar * {
-  box-sizing: border-box;
-}
-.frame-btn-Editar {
-  padding: 5px;
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  height: 25.75px;
-  position: relative;
-  border: none;
-  background: transparent;
-}
-
-.frame-btn-Editar:hover, .cancelar:hover{
-  background: rgb(175, 174, 174);
-}
-.eliminar:hover{
-  background: #700303;
-}
-
-.boton-modificar {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-  width: 112.5px;
-  position: relative;
-}
-.edit-2 {
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  position: relative;
-  overflow: visible;
-}
-.modificar {
-  color: var(--texto-light, #000000);
-  text-align: center;
-  font-family: "SegoeUi-Regular", sans-serif;
-  font-size: 20px;
-  line-height: 112%;
-  letter-spacing: -0.02em;
-  font-weight: 400;
-  position: relative;
-  width: 81px;
-  height: 17px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-
-/* The container <div> - needed to position the dropdown content */
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-/* Dropdown Content (Hidden by Default) */
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: #f1f1f1;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  z-index: 1;
-}
-
-/* Links inside the dropdown */
-.dropdown-content.frame-modificar {
-  color: black;
-  padding: 12px 16px;
-  text-decoration: none;
-  display: block;
-}
-
-/* Change color of dropdown links on hover */
-.dropdown-content .frame-modificar:hover {background-color: #ddd;}
-
-/* Show the dropdown menu on hover */
-.dropdown.active .dropdown-content {display: block;}
-
-/* Change the background color of the dropdown button when the dropdown content is shown */
-.dropdown.active .dropbtn {background-color: #3e8e41;}
-
-#modalBorrar::backdrop{
-  background-color: rgba(0, 0, 0, 0.55);
-}
-#modalBorrar{
-  padding: 0px;
-}
-
-dialog.modal-borrar {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  border: none;
-  border-radius: 8px;
-  padding: 2rem;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-  
-  background-color: white;
-  z-index: 999;
-}
-
-
-.borrar-plantilla {
-  background: var(--box-light, #ffffff);
-  padding: 25px;
-  display: flex;
-  flex-direction: column;
-  gap: 19px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 410px;
-  position: relative;
-}
-.titulo {
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  position: relative;
-}
-.eliminar-la-plantila {
-  color: var(--texto-light, #000000);
-  text-align: left;
-  font-family: "SegoeUi-Regular", sans-serif;
-  font-size: 32px;
-  line-height: 100%;
-  font-weight: 400;
-  position: relative;
-}
-.texto {
-  display: flex;
-  flex-direction: row;
-  row-gap: 11px;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  align-content: center;
-  flex-shrink: 0;
-  width: 383px;
-  max-width: 409px;
-  position: relative;
-}
-.eliminartexto {
-  color: var(--texto-light, #000000);
-  text-align: center;
-  font-family: "SegoeUi-Regular", sans-serif;
-  font-size: 20px;
-  line-height: 100%;
-  font-weight: 400;
-  position: relative;
-  width: 383px;
-}
-.botones {
-  padding: 10px;
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  position: relative;
-}
-.eliminar {
-  background: var(--primario, #a61930);
-  border-radius: 8px;
-  border-style: solid;
-  border-color: rgba(255, 255, 255, 0.2);
-  border-width: 2px;
-  padding: 10px;
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  position: relative;
-}
-.texto2 {
-  color: var(--texto-dark, #ffffff);
-  text-align: center;
-  font-family: "SegoeUi-Regular", sans-serif;
-  font-size: 24px;
-  line-height: 112%;
-  font-weight: 400;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.cancelar {
-  background: var(--box-light, #ffffff);
-  border-radius: 8px;
-  border-style: solid;
-  border-color: #262b40;
-  border-width: 2px;
-  padding: 10px;
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  position: relative;
-}
-.cancelar2 {
-  color: var(--texto-light, #000000);
-  text-align: center;
-  font-family: "SegoeUi-Regular", sans-serif;
-  font-size: 24px;
-  line-height: 112%;
-  letter-spacing: -0.02em;
-  font-weight: 400;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.menu-opciones,
-.menu-opciones * {
-  box-sizing: border-box;
-}
-.menu-opciones {
-  border-radius: 8px;
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  align-self: stretch;
-  flex-shrink: 0;
-  max-height: 127px;
-  position: relative;
-}
-
-.divisorPlantilla {
-  align-self: stretch;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-.nombre-de-plantilla {
-  color: var(--texto-light, #000000);
-  text-align: center;
-  font-family: "SegoeUi-Regular", sans-serif;
-  font-size: 24px;
-  line-height: 112%;
-  letter-spacing: -0.02em;
-  font-weight: 400;
-  position: relative;
-  width: 235px;
-  max-width: 235px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.maximize-2 {
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  position: relative;
-  overflow: visible;
-}
-.edit-2 {
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  position: relative;
-  overflow: visible;
-}
-.trash {
-  flex-shrink: 0;
-  width: 27.5px;
-  height: 27.5px;
-  position: relative;
-  overflow: visible;
-}
-
-button {
-  border: none;
-  background: transparent;
-  border-radius: 8px;
-  cursor: pointer;
-}
-button:hover{
-  background: rgba(0, 0, 0, 0.25);
-  border-radius: 8px;
-}
-
-.error-sin-plantillas,
-.error-sin-plantillas * {
-  box-sizing: border-box;
-}
-.error-sin-plantillas {
-  color: #000000;
-  text-align: center;
-  font-family: var(--hero-font-family, "SegoeUi-Regular", sans-serif);
-  font-size: var(--hero-font-size, 52px);
-  line-height: var(--hero-line-height, 120%);
-  letter-spacing: var(--hero-letter-spacing, -0.02em);
-  font-weight: var(--hero-font-weight, 400);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.previsualizador-maximizado,
-.previsualizador-maximizado * {
-  box-sizing: border-box;
-}
-.previsualizador-maximizado {
-  display: flex;
-  flex-direction: column;
-  gap: 51px;
-  align-items: flex-start;
-  justify-content: flex-start;
-  flex-shrink: 0;
-  height: 939px;
-  position: relative;
-}
-.maximizado-nombre-plantilla {
-  border-radius: 8px;
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  align-self: stretch;
-  flex-shrink: 0;
-  max-height: 127px;
-  position: relative;
-}
-.nombre-plantilla {
-  color: var(--texto-light, #000000);
-  text-align: center;
-  font-family: var(--hero-font-family, "SegoeUi-Regular", sans-serif);
-  font-size: var(--hero-font-size, 52px);
-  line-height: var(--hero-line-height, 120%);
-  letter-spacing: var(--hero-letter-spacing, -0.02em);
-  font-weight: var(--hero-font-weight, 400);
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-.seccion-preview-grafica-preview {
-  border-radius: 8px;
-  border-style: solid;
-  border-color: #000000;
-  border-width: 2px;
-  padding: 25px;
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  align-items: center;
-  justify-content: flex-start;
-  flex: 1;
-  position: relative;
-}
-.preview-gr-fica-preview {
-  color: #000000;
-  text-align: left;
-  font-family: var(--titulo-font-family, "SegoeUi-Regular", sans-serif);
-  font-size: var(--titulo-font-size, 32px);
-  line-height: var(--titulo-line-height, 120%);
-  letter-spacing: var(--titulo-letter-spacing, -0.02em);
-  font-weight: var(--titulo-font-weight, 400);
-  position: relative;
-}
-.primer-texto-prewview {
-  color: var(--texto-light, #000000);
-  text-align: left;
-  font-family: var(--parrafo-font-family, "SegoeUi-Regular", sans-serif);
-  font-size: var(--parrafo-font-size, 18px);
-  line-height: var(--parrafo-line-height, 120%);
-  letter-spacing: var(--parrafo-letter-spacing, -0.02em);
-  font-weight: var(--parrafo-font-weight, 400);
-  position: relative;
-  align-self: stretch;
-}
-.preview-grafica-preview {
-  background: #9e9e9e;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 750px;
-  height: 396px;
-  position: relative;
-}
-.bar-chart {
-  flex-shrink: 0;
-  width: 55px;
-  height: 55px;
-  position: relative;
-  overflow: visible;
-}
-.primer-texto-preview {
-  color: var(--texto-light, #000000);
-  text-align: left;
-  font-family: var(--parrafo-font-family, "SegoeUi-Regular", sans-serif);
-  font-size: var(--parrafo-font-size, 18px);
-  line-height: var(--parrafo-line-height, 120%);
-  letter-spacing: var(--parrafo-letter-spacing, -0.02em);
-  font-weight: var(--parrafo-font-weight, 400);
-  position: relative;
-  align-self: stretch;
-}
-.botones-fondo {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  align-self: stretch;
-  flex-shrink: 0;
-  position: relative;
-}
-.botones-ediar-eliminar {
-  display: flex;
-  flex-direction: row;
-  gap: 25px;
-  align-items: center;
-  justify-content: flex-start;
-  flex-shrink: 0;
-  position: relative;
-}
-.btn-editar {
-  border-radius: 8px;
-  border-style: solid;
-  border-color: var(--negro, #000000);
-  border-width: 2px;
-  padding: 10px;
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  align-items: center;
-  justify-content: flex-start;
-  flex-shrink: 0;
-  min-width: 150px;
-  position: relative;
-}
-.editar-maximizado {
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  position: relative;
-  overflow: visible;
-}
-.editar-maximizaddo {
-  color: #000000;
-  text-align: center;
-  font-family: var(--encabezado-font-family, "SegoeUi-Regular", sans-serif);
-  font-size: var(--encabezado-font-size, 24px);
-  line-height: var(--encabezado-line-height, 120%);
-  letter-spacing: var(--encabezado-letter-spacing, -0.02em);
-  font-weight: var(--encabezado-font-weight, 400);
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.btn-eliminar {
-  background: var(--primario, #a61930);
-  border-radius: 8px;
-  border-style: solid;
-  border-color: var(--bordeblanco, rgba(255, 255, 255, 0.2));
-  border-width: 1px;
-  padding: 10px;
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  align-items: center;
-  justify-content: flex-start;
-  flex-shrink: 0;
-  min-width: 150px;
-  position: relative;
-}
-.eliminar-maximizado {
-  flex-shrink: 0;
-  width: 27.5px;
-  height: 27.5px;
-  position: relative;
-  overflow: visible;
-}
-.eliminar-maximizado2 {
-  color: var(--blanco, #ffffff);
-  text-align: center;
-  font-family: var(--encabezado-font-family, "SegoeUi-Regular", sans-serif);
-  font-size: var(--encabezado-font-size, 24px);
-  line-height: var(--encabezado-line-height, 120%);
-  letter-spacing: var(--encabezado-letter-spacing, -0.02em);
-  font-weight: var(--encabezado-font-weight, 400);
-  position: relative;
-  width: 82px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.botones-usar-cancelar {
-  display: flex;
-  flex-direction: row;
-  gap: 25px;
-  align-items: flex-start;
-  justify-content: center;
-  flex-shrink: 0;
-  position: relative;
-}
-.btn-usar {
-  background: var(--secundario, #a61930);
-  border-radius: 8px;
-  border-style: solid;
-  border-color: rgba(255, 255, 255, 0.2);
-  border-width: 2px;
-  padding: 10px;
-  display: flex;
-  flex-direction: row;
-  gap: 10px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  min-width: 150px;
-  position: relative;
-}
-.uasr-maximizado {
-  color: var(--texto-dark, #ffffff);
-  text-align: center;
-  font-family: var(--encabezado-font-family, "SegoeUi-Regular", sans-serif);
-  font-size: var(--encabezado-font-size, 24px);
-  line-height: var(--encabezado-line-height, 120%);
-  letter-spacing: var(--encabezado-letter-spacing, -0.02em);
-  font-weight: var(--encabezado-font-weight, 400);
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.btn-cancelar {
-  background: var(--box-light, #ffffff);
-  border-radius: 8px;
-  border-style: solid;
-  border-color: #262b40;
-  border-width: 2px;
-  padding: 10px;
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  min-width: 150px;
-  position: relative;
-}
-.cancelar-maximizado {
-  color: var(--texto-light, #000000);
-  text-align: center;
-  font-family: var(--encabezado-font-family, "SegoeUi-Regular", sans-serif);
-  font-size: var(--encabezado-font-size, 24px);
-  line-height: var(--encabezado-line-height, 120%);
-  letter-spacing: var(--encabezado-letter-spacing, -0.02em);
-  font-weight: var(--encabezado-font-weight, 400);
-  position: relative;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css b/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
new file mode 100644
index 00000000..1a446f9e
--- /dev/null
+++ b/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
@@ -0,0 +1,27 @@
+.frame-plantillas{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-content: baseline;
+    width: 100%;
+    height: 100em;
+}
+
+.frame-plantillas-izquierda {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    width: 100%;
+    height: 3em;
+    padding: 0.5em;
+}
+
+.frame-plantillas-derecha {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    width: 100%;
+    height: 3em;
+    padding: 0.5em;
+}
+
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/json.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/json.js
new file mode 100644
index 00000000..29097629
--- /dev/null
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/json.js
@@ -0,0 +1,22 @@
+
+
+{
+    componentes : [
+        {
+            componente : "texto",
+            tipo : "titulo",
+            contenido : "Reporte trimestral de CASE 110 A",
+            alineamiento : "izquierda",
+        },
+        {
+            componente : "grafica",
+            nombre : "Litros de gasolina consumidos",
+            tipo : "linea",
+            tractor : "CASE 110 A (TEC)",
+            parametro : '',
+            filtro : 'Filtro encendido',
+            formula : 'Exceso de Gasolina'
+
+        }
+    ]
+}
\ No newline at end of file
diff --git a/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs b/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs
index c928715d..9e352dc6 100644
--- a/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs
+++ b/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs
@@ -2,7 +2,32 @@
 
 <head>
   <link rel="stylesheet" href="<%= rutaBase %>src/framework/utils/css/paginas/analisis/generarReporte.css">
+  <link rel="stylesheet" href="<%= rutaBase %>src/framework/utils/css/paginas/plantillas/plantillas.css">
 </head>
+  <div class="frame-plantillas">
+    <div class="frame-plantillas-izquierda">
+        <select name="plantilla" id="plantilla-seleccionada">
+          <option value="volvo">Volvo</option>
+          <option value="saab">Saab</option>
+          <option value="mercedes">Mercedes</option>
+          <option value="audi">Audi</option>
+        </select>
+        <button id="cargarPlantilla" class="boton-principal">
+          <span>Cargar Plantilla</span>
+        </button>
+        <button id="eliminarPlantilla" class="boton-secundario">
+          <span>Eliminar Plantilla</span>
+        </button>
+      </div>
+      <div class="frame-plantillas-derecha">
+        <input type="text" id="nombrePlantilla" placeholder="Nombre de la plantilla" class="input-nombre-plantilla">
+        <button id="guardarPlantilla" class="boton-principal">
+          <span>Guardar Plantilla</span>
+        </button>
+      </div>
+  </div> 
+
+
   <div class="frame-analisis">
 
     <!-- Sección de agregados y acciones -->
diff --git a/harvester-app/src/main.js b/harvester-app/src/main.js
index 88b09503..6f4bcd66 100644
--- a/harvester-app/src/main.js
+++ b/harvester-app/src/main.js
@@ -27,7 +27,7 @@ const createWindow = async () => {
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,
-      devTools: false,
+      devTools: true,
     },
   });
 

From 03d6ef378208b808f02f29c5642407b1d71d7da3 Mon Sep 17 00:00:00 2001
From: Diego <a01705506@tec.mx>
Date: Mon, 14 Jul 2025 10:41:32 -0600
Subject: [PATCH 02/18] interfaz

---
 .../css/paginas/plantillas/plantillas.css     | 34 +++++++++++++++++--
 .../paginas/analisis/generarReporte.ejs       | 10 +++---
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css b/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
index 1a446f9e..5254ffe7 100644
--- a/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
+++ b/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
@@ -4,7 +4,11 @@
     justify-content: flex-start;
     align-content: baseline;
     width: 100%;
-    height: 100em;
+    height: 100%;
+    border-radius: 0.33em;
+    background-color: #ededed;
+    margin-bottom: 1em;
+    padding: 0.5em;
 }
 
 .frame-plantillas-izquierda {
@@ -13,7 +17,7 @@
     justify-content: flex-start;
     width: 100%;
     height: 3em;
-    padding: 0.5em;
+    
 }
 
 .frame-plantillas-derecha {
@@ -22,6 +26,30 @@
     justify-content: flex-end;
     width: 100%;
     height: 3em;
-    padding: 0.5em;
+    /* padding: 0.5em; */
+}
+
+.boton-principal, .selector-plantilla, .input-nombre-plantilla {
+    border-radius: 0.33em;
+    border: none;
+    padding: 0.5em 1em;
+    margin: 0.5em;
+    background-color: #ffffff;
 }
 
+.boton-principal:hover {
+    background-color: #f9f9f9;
+}
+
+.boton-secundario {
+    border-radius: 0.33em;
+    border: none;
+    padding: 0.5em 1em;
+    margin: 0.5em;
+    background-color: #a61930;
+    color: #ffffff;
+}
+
+.boton-secundario:hover {
+    background-color: #7d1425;
+}
diff --git a/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs b/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs
index 9e352dc6..60745d4a 100644
--- a/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs
+++ b/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs
@@ -6,11 +6,11 @@
 </head>
   <div class="frame-plantillas">
     <div class="frame-plantillas-izquierda">
-        <select name="plantilla" id="plantilla-seleccionada">
-          <option value="volvo">Volvo</option>
-          <option value="saab">Saab</option>
-          <option value="mercedes">Mercedes</option>
-          <option value="audi">Audi</option>
+        <select class="selector-plantilla" name="plantilla" id="plantilla-seleccionada">
+          <option value="volvo">Reporte 1</option>
+          <option value="saab">Reporte gasolina</option>
+          <option value="mercedes">Reporte de velocidad</option>
+          <option value="audi">Reporte 2</option>
         </select>
         <button id="cargarPlantilla" class="boton-principal">
           <span>Cargar Plantilla</span>

From 2a35a1f2661889f5d19adc4fcaaf573da33fe772 Mon Sep 17 00:00:00 2001
From: Diego <a01705506@tec.mx>
Date: Thu, 17 Jul 2025 22:04:10 -0600
Subject: [PATCH 03/18] Progreso en crear, consultar, y eliminar plantilla

---
 .../casosUso/plantillas/consultarPlantilla.js |  0
 .../plantillas/consultarPlantillas.js         | 22 +++++++++++++++
 .../casosUso/plantillas/crearPlantilla.js     | 23 +++++++++++++++
 .../casosUso/plantillas/eliminarPlantilla.js  | 22 +++++++++++++++
 ...rPlantillaAPI.js => consultarPlantilla.js} |  9 +++---
 ...lantillasAPI.js => consultarPlantillas.js} |  9 +++---
 .../domain/plantillasAPI/crearPlantilla.js    | 28 +++++++++++++++++++
 ...rPlantillasAPI.js => eliminarPlantilla.js} | 10 +++----
 .../paginas/plantillas/consultarPlantillas.js | 14 ++++++++++
 .../paginas/plantillas/crearPlantilla.js      | 18 ++++++++++++
 .../paginas/plantillas/eliminarPlantilla.js   | 20 +++++++++++++
 .../paginas/analisis/generarReporte.ejs       | 15 +++++-----
 12 files changed, 169 insertions(+), 21 deletions(-)
 create mode 100644 harvester-app/src/backend/casosUso/plantillas/consultarPlantilla.js
 create mode 100644 harvester-app/src/backend/casosUso/plantillas/consultarPlantillas.js
 create mode 100644 harvester-app/src/backend/casosUso/plantillas/crearPlantilla.js
 create mode 100644 harvester-app/src/backend/casosUso/plantillas/eliminarPlantilla.js
 rename harvester-app/src/backend/domain/plantillasAPI/{seleccionarPlantillaAPI.js => consultarPlantilla.js} (57%)
 rename harvester-app/src/backend/domain/plantillasAPI/{plantillasAPI.js => consultarPlantillas.js} (56%)
 create mode 100644 harvester-app/src/backend/domain/plantillasAPI/crearPlantilla.js
 rename harvester-app/src/backend/domain/plantillasAPI/{eliminarPlantillasAPI.js => eliminarPlantilla.js} (54%)
 create mode 100644 harvester-app/src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js
 create mode 100644 harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
 create mode 100644 harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js

diff --git a/harvester-app/src/backend/casosUso/plantillas/consultarPlantilla.js b/harvester-app/src/backend/casosUso/plantillas/consultarPlantilla.js
new file mode 100644
index 00000000..e69de29b
diff --git a/harvester-app/src/backend/casosUso/plantillas/consultarPlantillas.js b/harvester-app/src/backend/casosUso/plantillas/consultarPlantillas.js
new file mode 100644
index 00000000..b8b7081e
--- /dev/null
+++ b/harvester-app/src/backend/casosUso/plantillas/consultarPlantillas.js
@@ -0,0 +1,22 @@
+
+const { consultarPlantillas: consultarPlantillasAPI} = require('../../domain/plantillasAPI/consultarPlantillas.js');
+
+/**
+ * Crea una plantilla a través de la API y retorna la respuesta obtenida.
+ * @async
+ * @function consultarPlantillas
+ * @param {string} token - Token de autenticación.
+ * @returns {Promise<Object>} Respuesta del servidor.
+ * @throws {Error} Si no se pudo consultar las plantillas.
+ */
+async function consultarPlantillas(){
+    try{
+        const respuesta = await consultarPlantillasAPI(localStorage.getItem('token'));
+        return respuesta;
+    } catch(error){
+        throw new Error('No se pudo consultar las plantillas', error);
+    }
+}
+module.exports = {
+    consultarPlantillas
+};
\ No newline at end of file
diff --git a/harvester-app/src/backend/casosUso/plantillas/crearPlantilla.js b/harvester-app/src/backend/casosUso/plantillas/crearPlantilla.js
new file mode 100644
index 00000000..5d41f90f
--- /dev/null
+++ b/harvester-app/src/backend/casosUso/plantillas/crearPlantilla.js
@@ -0,0 +1,23 @@
+
+const { crearPlantilla: crearPlantillaAPI} = require('../../domain/plantillasAPI/crearPlantilla.js');
+
+/**
+ * Crea una plantilla a través de la API y retorna la respuesta obtenida.
+ * @async
+ * @function crearPlantilla
+ * @param {string} nombre - Nombre de la plantilla.
+ * @param {string} datos - Contenido de la plantilla.
+ * @returns {Promise<Object>} Respuesta del servidor.
+ * @throws {Error} Si no se pudo crear la plantilla.
+ */
+async function crearPlantilla(nombre, datos){
+    try{
+        const respuesta = await crearPlantillaAPI(nombre, datos, localStorage.getItem('token'));
+        return respuesta;
+    } catch(error){
+        throw new Error('No se pudo crear la plantilla', error);
+    }
+}
+module.exports = {
+    crearPlantilla
+};
\ No newline at end of file
diff --git a/harvester-app/src/backend/casosUso/plantillas/eliminarPlantilla.js b/harvester-app/src/backend/casosUso/plantillas/eliminarPlantilla.js
new file mode 100644
index 00000000..ff134ba5
--- /dev/null
+++ b/harvester-app/src/backend/casosUso/plantillas/eliminarPlantilla.js
@@ -0,0 +1,22 @@
+
+const { eliminarrPlantilla: eliminarPlantillaAPI} = require('../../domain/plantillasAPI/eliminarPlantilla.js');
+
+/**
+ * Crea una plantilla a través de la API y retorna la respuesta obtenida.
+ * @async
+ * @function eliminarPlantilla
+ * @param {string} token - Token de autenticación.
+ * @returns {Promise<Object>} Respuesta del servidor.
+ * @throws {Error} Si no se pudo eliminar la plantilla.
+ */
+async function eliminarPlantilla(nombrePlantilla){
+    try{
+        const respuesta = await eliminarPlantillaAPI(nombrePlantilla, localStorage.getItem('token'));
+        return respuesta;
+    } catch(error){
+        throw new Error('No se pudo eliminar la plantilla', error);
+    }
+}
+module.exports = {
+    eliminarPlantilla
+};
\ No newline at end of file
diff --git a/harvester-app/src/backend/domain/plantillasAPI/seleccionarPlantillaAPI.js b/harvester-app/src/backend/domain/plantillasAPI/consultarPlantilla.js
similarity index 57%
rename from harvester-app/src/backend/domain/plantillasAPI/seleccionarPlantillaAPI.js
rename to harvester-app/src/backend/domain/plantillasAPI/consultarPlantilla.js
index 9c2d81cf..6ec85952 100644
--- a/harvester-app/src/backend/domain/plantillasAPI/seleccionarPlantillaAPI.js
+++ b/harvester-app/src/backend/domain/plantillasAPI/consultarPlantilla.js
@@ -1,10 +1,11 @@
-const { URL_BASE } = require('../../../framework/utils/js/constantes');
+const { URL_BASE } = require(`${rutaBase}src/framework/utils/scripts/constantes.js`);
 
-async function seleccionarPlantillas(idPlantilla) {
+async function seleccionarPlantilla(idPlantilla, token) {
     const respuesta = await fetch(`${URL_BASE}/plantillas/seleccionar`, {
-      method: 'POST',
+      method: 'GET',
       headers: {
         'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
       },
       body: JSON.stringify({idPlantilla})
     });
@@ -15,5 +16,5 @@ async function seleccionarPlantillas(idPlantilla) {
   }
   
   module.exports = {
-    seleccionarPlantillas,
+    seleccionarPlantilla,
   };
\ No newline at end of file
diff --git a/harvester-app/src/backend/domain/plantillasAPI/plantillasAPI.js b/harvester-app/src/backend/domain/plantillasAPI/consultarPlantillas.js
similarity index 56%
rename from harvester-app/src/backend/domain/plantillasAPI/plantillasAPI.js
rename to harvester-app/src/backend/domain/plantillasAPI/consultarPlantillas.js
index 3648e5cd..34e84d7a 100644
--- a/harvester-app/src/backend/domain/plantillasAPI/plantillasAPI.js
+++ b/harvester-app/src/backend/domain/plantillasAPI/consultarPlantillas.js
@@ -1,10 +1,11 @@
-const { URL_BASE } = require('../../../framework/utils/js/constantes');
+const { URL_BASE } = require(`${rutaBase}src/framework/utils/scripts/constantes.js`);
 
-async function plantillas() {
-    const respuesta = await fetch(`${URL_BASE}/plantillas/consultar`, {
+async function consultarPlantillas(token) {
+    const respuesta = await fetch(`${URL_BASE}/plantillas/consultarPlantillas`, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
+        'Authorization': `Bearer ${token}`
       }
     });
   
@@ -14,5 +15,5 @@ async function plantillas() {
   }
   
   module.exports = {
-    plantillas,
+    consultarPlantillas,
 };
\ No newline at end of file
diff --git a/harvester-app/src/backend/domain/plantillasAPI/crearPlantilla.js b/harvester-app/src/backend/domain/plantillasAPI/crearPlantilla.js
new file mode 100644
index 00000000..e9864e82
--- /dev/null
+++ b/harvester-app/src/backend/domain/plantillasAPI/crearPlantilla.js
@@ -0,0 +1,28 @@
+const { URL_BASE } = require(`${rutaBase}src/framework/utils/scripts/constantes.js`);
+/**
+ * 
+ * @module formulaApi
+ * @description Módulo para interactuar con la API de fórmulas.
+ * @param {string} nombre 
+ * @param {string} datos
+ * @param {string} token
+ * @returns {Promise<Object>} Respuesta de la API. 
+ * @throws {Error} Si no se pudo guardar la fórmula.
+ */
+async function crearPlantilla(titulo, contenido, token) {
+    const respuesta = await fetch(`${URL_BASE}/plantillas/guardarPlantilla`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({titulo, contenido}),
+    });
+
+    const datos = await respuesta.json();
+    return { ok: respuesta.ok, ...datos };
+}
+
+module.exports = {
+    crearPlantilla,
+};
\ No newline at end of file
diff --git a/harvester-app/src/backend/domain/plantillasAPI/eliminarPlantillasAPI.js b/harvester-app/src/backend/domain/plantillasAPI/eliminarPlantilla.js
similarity index 54%
rename from harvester-app/src/backend/domain/plantillasAPI/eliminarPlantillasAPI.js
rename to harvester-app/src/backend/domain/plantillasAPI/eliminarPlantilla.js
index 11ed1745..39f4fac5 100644
--- a/harvester-app/src/backend/domain/plantillasAPI/eliminarPlantillasAPI.js
+++ b/harvester-app/src/backend/domain/plantillasAPI/eliminarPlantilla.js
@@ -1,12 +1,12 @@
-const { URL_BASE } = require('../../../framework/utils/js/constantes');
+const { URL_BASE } = require(`${rutaBase}src/framework/utils/scripts/constantes.js`);
 
-async function eliminarPlantillas(idPlantilla) {
-    const respuesta = await fetch(`${URL_BASE}/plantillas/eliminar`, {
+async function eliminarPlantilla(nombrePlantilla, token) {
+    const respuesta = await fetch(`${URL_BASE}/plantillas/eliminarPlantilla/${nombrePlantilla}`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`
       },
-      body: JSON.stringify({idPlantilla})
     });
   
     const datos = await respuesta.json();
@@ -15,5 +15,5 @@ async function eliminarPlantillas(idPlantilla) {
   }
   
   module.exports = {
-    eliminarPlantillas,
+    eliminarPlantilla,
   };
\ No newline at end of file
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js
new file mode 100644
index 00000000..09b5fdba
--- /dev/null
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js
@@ -0,0 +1,14 @@
+const { consultarPlantillas } = require(`${rutaBase}src/backend/casosUso/plantillas/consultarPlantillas.js`);
+
+async function setup(){
+    const plantillas = await consultarPlantillas();
+    const selectorPlantilla = document.getElementById('selectorPlantilla');
+    plantillas.datos.forEach(plantilla => {
+        const option = document.createElement('option');
+        option.value = plantilla.titulo;
+        option.textContent = plantilla.titulo;
+        selectorPlantilla.appendChild(option);
+    })
+}
+
+setup();
\ No newline at end of file
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
new file mode 100644
index 00000000..35794b38
--- /dev/null
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
@@ -0,0 +1,18 @@
+const { crearPlantilla } = require(`${rutaBase}src/backend/casosUso/plantillas/crearPlantilla.js`);
+// const { mostrarAlerta } = require(`${rutaBase}/src/framework/vistas/includes/componentes/moleculas/alertaSwal/alertaSwal`);
+
+function setup(){
+    const nombrePlantilla = document.getElementById('nombrePlantilla');
+    const botonGuardarPlantilla = document.getElementById('botonGuardarPlantilla');
+
+    botonGuardarPlantilla.addEventListener('click', async () => {
+        const respuesta = await crearPlantilla(nombrePlantilla.value, 'prueba de datos');
+        if (respuesta.ok) {
+            mostrarAlerta('Correcto', 'Plantilla guardada correctamente', 'success');
+        } else {
+            mostrarAlerta('Error', 'Error al guardar la plantilla: ' + respuesta.error, 'error');
+        }
+    });
+}
+
+setup();
\ No newline at end of file
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js
new file mode 100644
index 00000000..fda1718a
--- /dev/null
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js
@@ -0,0 +1,20 @@
+const { eliminarPlantilla } = require(`${rutaBase}src/backend/casosUso/plantillas/eliminarPlantilla.js`);
+
+function setup(){
+    const nombrePlantilla = document.getElementById('selectorPlantilla');
+    const botonEliminarPlantilla = document.getElementById('botonEliminarPlantilla');
+
+    botonEliminarPlantilla.addEventListener('click', async () => {
+        console.log('Eliminando plantilla...');
+        console.log('Eliminando plantilla:', nombrePlantilla.value);
+        const respuesta = await eliminarPlantilla(nombrePlantilla.value);
+        console.log('Respuesta de eliminarPlantilla:', respuesta);
+        if (respuesta.ok) {
+            mostrarAlerta('Correcto', 'Plantilla eliminada correctamente', 'success');
+        } else {
+            mostrarAlerta('Error', 'Error al eliminar la plantilla: ' + respuesta.error, 'error');
+        }
+    });
+}
+
+setup();
\ No newline at end of file
diff --git a/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs b/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs
index 60745d4a..8607ff7a 100644
--- a/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs
+++ b/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs
@@ -6,22 +6,18 @@
 </head>
   <div class="frame-plantillas">
     <div class="frame-plantillas-izquierda">
-        <select class="selector-plantilla" name="plantilla" id="plantilla-seleccionada">
-          <option value="volvo">Reporte 1</option>
-          <option value="saab">Reporte gasolina</option>
-          <option value="mercedes">Reporte de velocidad</option>
-          <option value="audi">Reporte 2</option>
+        <select class="selector-plantilla" name="plantilla" id="selectorPlantilla">
         </select>
-        <button id="cargarPlantilla" class="boton-principal">
+        <button id="botonCargarPlantilla" class="boton-principal">
           <span>Cargar Plantilla</span>
         </button>
-        <button id="eliminarPlantilla" class="boton-secundario">
+        <button id="botonEliminarPlantilla" class="boton-secundario">
           <span>Eliminar Plantilla</span>
         </button>
       </div>
       <div class="frame-plantillas-derecha">
         <input type="text" id="nombrePlantilla" placeholder="Nombre de la plantilla" class="input-nombre-plantilla">
-        <button id="guardarPlantilla" class="boton-principal">
+        <button id="botonGuardarPlantilla" class="boton-principal">
           <span>Guardar Plantilla</span>
         </button>
       </div>
@@ -49,5 +45,8 @@
   </div>
   
   <script src='<%= rutaBase %>src/framework/utils/scripts/paginas/analisis/moduloAnalisis.js'></script>
+  <script src='<%= rutaBase %>src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js'></script>
+  <script src='<%= rutaBase %>src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js'></script>
+  <script src='<%= rutaBase %>src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js'></script>
 
 <%- include ('../../includes/piePagina.ejs')%>
\ No newline at end of file

From 5a00ac981f14ad1ec6f7e450bde2bf2b9223d2fe Mon Sep 17 00:00:00 2001
From: DanielQueijeiro <dany.queijeiro@hotmail.com>
Date: Thu, 17 Jul 2025 22:12:17 -0600
Subject: [PATCH 04/18] arreglar eliminar plantilla

---
 .../src/backend/casosUso/plantillas/eliminarPlantilla.js       | 2 +-
 .../src/backend/domain/plantillasAPI/eliminarPlantilla.js      | 2 +-
 .../utils/scripts/paginas/plantillas/eliminarPlantilla.js      | 3 ---
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/harvester-app/src/backend/casosUso/plantillas/eliminarPlantilla.js b/harvester-app/src/backend/casosUso/plantillas/eliminarPlantilla.js
index ff134ba5..87bb5473 100644
--- a/harvester-app/src/backend/casosUso/plantillas/eliminarPlantilla.js
+++ b/harvester-app/src/backend/casosUso/plantillas/eliminarPlantilla.js
@@ -1,5 +1,5 @@
 
-const { eliminarrPlantilla: eliminarPlantillaAPI} = require('../../domain/plantillasAPI/eliminarPlantilla.js');
+const { eliminarPlantilla: eliminarPlantillaAPI} = require('../../domain/plantillasAPI/eliminarPlantilla.js');
 
 /**
  * Crea una plantilla a través de la API y retorna la respuesta obtenida.
diff --git a/harvester-app/src/backend/domain/plantillasAPI/eliminarPlantilla.js b/harvester-app/src/backend/domain/plantillasAPI/eliminarPlantilla.js
index 39f4fac5..5ed2664f 100644
--- a/harvester-app/src/backend/domain/plantillasAPI/eliminarPlantilla.js
+++ b/harvester-app/src/backend/domain/plantillasAPI/eliminarPlantilla.js
@@ -2,7 +2,7 @@ const { URL_BASE } = require(`${rutaBase}src/framework/utils/scripts/constantes.
 
 async function eliminarPlantilla(nombrePlantilla, token) {
     const respuesta = await fetch(`${URL_BASE}/plantillas/eliminarPlantilla/${nombrePlantilla}`, {
-      method: 'POST',
+      method: 'DELETE',
       headers: {
         'Content-Type': 'application/json',
         Authorization: `Bearer ${token}`
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js
index fda1718a..08c4870b 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js
@@ -5,10 +5,7 @@ function setup(){
     const botonEliminarPlantilla = document.getElementById('botonEliminarPlantilla');
 
     botonEliminarPlantilla.addEventListener('click', async () => {
-        console.log('Eliminando plantilla...');
-        console.log('Eliminando plantilla:', nombrePlantilla.value);
         const respuesta = await eliminarPlantilla(nombrePlantilla.value);
-        console.log('Respuesta de eliminarPlantilla:', respuesta);
         if (respuesta.ok) {
             mostrarAlerta('Correcto', 'Plantilla eliminada correctamente', 'success');
         } else {

From ec1fc31df3de55d584a92b8aa57a1d70fec6c51e Mon Sep 17 00:00:00 2001
From: Diego <a01705506@tec.mx>
Date: Tue, 22 Jul 2025 03:15:32 -0600
Subject: [PATCH 05/18] progreso

---
 .../casosUso/plantillas/consultarPlantilla.js |  22 ++++
 .../plantillas/consultarPlantillas.js         |   2 +-
 .../plantillasAPI/consultarPlantilla.js       |   7 +-
 .../css/paginas/plantillas/plantillas.css     |   4 +
 .../paginas/plantillas/cargarPlantilla.js     | 113 ++++++++++++++++++
 .../paginas/plantillas/consultarPlantillas.js |  15 ++-
 .../paginas/plantillas/crearPlantilla.js      |  46 ++++++-
 .../paginas/plantillas/eliminarPlantilla.js   |   7 +-
 .../plantillas/{json.js => jsonPlantilla.js}  |   0
 .../paginas/analisis/generarReporte.ejs       |   3 +-
 10 files changed, 206 insertions(+), 13 deletions(-)
 create mode 100644 harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
 rename harvester-app/src/framework/utils/scripts/paginas/plantillas/{json.js => jsonPlantilla.js} (100%)

diff --git a/harvester-app/src/backend/casosUso/plantillas/consultarPlantilla.js b/harvester-app/src/backend/casosUso/plantillas/consultarPlantilla.js
index e69de29b..c8253b8a 100644
--- a/harvester-app/src/backend/casosUso/plantillas/consultarPlantilla.js
+++ b/harvester-app/src/backend/casosUso/plantillas/consultarPlantilla.js
@@ -0,0 +1,22 @@
+
+const { consultarPlantilla: consultarPlantillaAPI} = require('../../domain/plantillasAPI/consultarPlantilla.js');
+
+/**
+ * Crea una plantilla a través de la API y retorna la respuesta obtenida.
+ * @async
+ * @function consultarPlantillas
+ * @param {string} token - Token de autenticación.
+ * @returns {Promise<Object>} Respuesta del servidor.
+ * @throws {Error} Si no se pudo consultar las plantillas.
+ */
+async function consultarPlantilla(nombrePlantilla){
+    try{
+        const respuesta = await consultarPlantillaAPI(nombrePlantilla, localStorage.getItem('token'));
+        return respuesta;
+    } catch(error){
+        throw new Error('No se pudo consultar la plantilla', error);
+    }
+}
+module.exports = {
+    consultarPlantilla
+};
\ No newline at end of file
diff --git a/harvester-app/src/backend/casosUso/plantillas/consultarPlantillas.js b/harvester-app/src/backend/casosUso/plantillas/consultarPlantillas.js
index b8b7081e..36f4b027 100644
--- a/harvester-app/src/backend/casosUso/plantillas/consultarPlantillas.js
+++ b/harvester-app/src/backend/casosUso/plantillas/consultarPlantillas.js
@@ -14,7 +14,7 @@ async function consultarPlantillas(){
         const respuesta = await consultarPlantillasAPI(localStorage.getItem('token'));
         return respuesta;
     } catch(error){
-        throw new Error('No se pudo consultar las plantillas', error);
+        throw new Error('No se pudieron consultar las plantillas', error);
     }
 }
 module.exports = {
diff --git a/harvester-app/src/backend/domain/plantillasAPI/consultarPlantilla.js b/harvester-app/src/backend/domain/plantillasAPI/consultarPlantilla.js
index 6ec85952..38873f6d 100644
--- a/harvester-app/src/backend/domain/plantillasAPI/consultarPlantilla.js
+++ b/harvester-app/src/backend/domain/plantillasAPI/consultarPlantilla.js
@@ -1,13 +1,12 @@
 const { URL_BASE } = require(`${rutaBase}src/framework/utils/scripts/constantes.js`);
 
-async function seleccionarPlantilla(idPlantilla, token) {
-    const respuesta = await fetch(`${URL_BASE}/plantillas/seleccionar`, {
+async function consultarPlantilla(nombrePlantilla, token) {
+    const respuesta = await fetch(`${URL_BASE}/plantillas/consultarPlantilla/${nombrePlantilla}`, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
         'Authorization': `Bearer ${token}`
       },
-      body: JSON.stringify({idPlantilla})
     });
   
     const datos = await respuesta.json();
@@ -16,5 +15,5 @@ async function seleccionarPlantilla(idPlantilla, token) {
   }
   
   module.exports = {
-    seleccionarPlantilla,
+    consultarPlantilla,
   };
\ No newline at end of file
diff --git a/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css b/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
index 5254ffe7..11005451 100644
--- a/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
+++ b/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
@@ -30,6 +30,8 @@
 }
 
 .boton-principal, .selector-plantilla, .input-nombre-plantilla {
+    font-family: "SegoeUi-Regular", sans-serif;
+    font-size: medium;
     border-radius: 0.33em;
     border: none;
     padding: 0.5em 1em;
@@ -42,6 +44,8 @@
 }
 
 .boton-secundario {
+    font-family: "SegoeUi-Regular", sans-serif;
+    font-size: medium;
     border-radius: 0.33em;
     border: none;
     padding: 0.5em 1em;
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
new file mode 100644
index 00000000..0c55385d
--- /dev/null
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
@@ -0,0 +1,113 @@
+const { consultarPlantilla } = require(`${rutaBase}src/backend/casosUso/plantillas/consultarPlantilla.js`);
+// const { consultarPlantillas } = require(`${rutaBase}src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js`);
+// const { configurarTexto } = require(`${rutaBase}src/framework/utils/scripts/paginas/analisis/agregarTexto.js`);
+// const { agregarGrafica } = require(`${rutaBase}src/framework/utils/scripts/paginas/analisis/agregarGrafica.js`);
+
+// const { configurarTexto, configurarGrafica } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/botonesAgregar.js`);
+
+function cargarPlantillaScript(){
+    const nombrePlantilla = document.getElementById('selectorPlantilla');
+    const botonCargarPlantilla = document.getElementById('botonCargarPlantilla');
+
+    botonCargarPlantilla.addEventListener('click', async () => {
+        const respuesta = await consultarPlantilla(nombrePlantilla.value);
+        console.log('plantilla cargada:', respuesta);
+        const contenido = JSON.parse(respuesta.datos.contenido);
+        console.log('contenido:', contenido);
+        const idContenedor = 'contenedorElementos';
+        const idContenedorPrevisualizacion = 'contenedor-elementos-previsualizacion';
+        await cargarPlantillaDesdeJSON(contenido, idContenedor, idContenedorPrevisualizacion);
+
+        if (respuesta.ok) {
+            mostrarAlerta('Correcto', 'Plantilla cargada correctamente', 'success');
+        } else {
+            mostrarAlerta('Error', 'Error al cargar la plantilla: ' + respuesta.error, 'error');
+        }
+    });
+}
+
+
+async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisualizacion) {
+    try {
+        const componentes = json;
+        const contenedor = document.querySelector(`#${contenedorId}`);
+        
+        // Limpiar el contenedor
+        contenedor.innerHTML = '';
+
+        // Iterar sobre cada componente
+        for (const componente of componentes) {
+            if (componente.componente == "texto") {
+                console.log('es un texto!')
+                // Crear tarjeta de texto
+                configurarTexto(contenedorId, idContenedorPrevisualizacion);
+                
+                const tarjetaTexto = contenedor.querySelector(`.tarjeta-texto:last-child`);
+                
+                if (tarjetaTexto) {
+                    // Configurar propiedades
+                    const tipoTexto = tarjetaTexto.querySelector('.tipo-texto');
+                    const areaEscritura = tarjetaTexto.querySelector('.area-escritura');
+                    const iconoAlign = tarjetaTexto.querySelector('.icono-align');
+                    
+                    if (tipoTexto) tipoTexto.value = componente.tipo;
+                    if (areaEscritura) areaEscritura.value = componente.contenido;
+                    
+                    // Configurar alineamiento
+                    if (iconoAlign) {
+                        iconoAlign.classList.remove('align-left', 'align-center', 'align-right');
+                        iconoAlign.classList.add(componente.alineamiento);
+                    }
+                }
+
+                // console.log('texto configurado')
+                // tarjeta = contenedor.querySelector('.tarjeta-texto#1').querySelector('tipo-texto')
+                // console.log('tarjeta:', tarjeta);
+                // Configurar propiedades
+                // console.log('tipo: ', tarjetaTexto.querySelector('.tipo-texto')) //.value = componente.tipo;
+                // console.log(tarjetaTexto.querySelector('.area-escritura')) //.value = componente.contenido;
+                
+                // Configurar alineamiento
+                // const iconoAlign = tarjetaTexto.querySelector('.icono-align');
+                // iconoAlign.classList.remove('align-left', 'align-center', 'align-right');
+                // iconoAlign.classList.add(componente.alineamiento);
+                
+            } else if (componente.componente == "grafica") {~
+                console.log('es una grafica!')
+                // Crear tarjeta de gráfica
+                configurarGrafica(contenedorId, idContenedorPrevisualizacion);
+                
+                const tarjetaGrafica = contenedor.querySelector(`.tarjeta-grafica:last-child`);
+                
+                if (tarjetaGrafica) {
+                    // Configurar propiedades
+                    const elementos = {
+                        titulo: tarjetaGrafica.querySelector('.titulo-grafica'),
+                        tipo: tarjetaGrafica.querySelector('.tipo-grafica'),
+                        tractor: tarjetaGrafica.querySelector('.tractor-grafica'),
+                        color: tarjetaGrafica.querySelector('#color-entrada')
+                    };
+                    
+                    if (elementos.titulo) elementos.titulo.value = componente.nombre;
+                    if (elementos.tipo) elementos.tipo.value = componente.tipo;
+                    if (elementos.tractor) elementos.tractor.value = componente.tractor;
+                    if (elementos.color) elementos.color.value = componente.color;
+                }
+
+                // Configurar propiedades
+                // tarjetaGrafica.querySelector('.titulo-grafica').value = componente.nombre;
+                // tarjetaGrafica.querySelector('.tipo-grafica').value = componente.tipo;
+                // tarjetaGrafica.querySelector('.tractor-grafica').value = componente.tractor;
+                // tarjetaGrafica.querySelector('#color-entrada').value = componente.color;
+                
+                // Si tienes más propiedades específicas de la gráfica, configúralas aquí
+            }
+        }
+    } catch (error) {
+        console.error('Error al cargar la plantilla:', error);
+        mostrarAlerta('Error', 'No se pudo cargar la plantilla correctamente', 'error');
+    }
+}
+
+cargarPlantillaScript();
+
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js
index 09b5fdba..2f9d4e73 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js
@@ -1,8 +1,15 @@
 const { consultarPlantillas } = require(`${rutaBase}src/backend/casosUso/plantillas/consultarPlantillas.js`);
 
-async function setup(){
+function vaciarSelectorPlantillas() {
+    const selectorPlantilla = document.getElementById('selectorPlantilla');
+    selectorPlantilla.innerHTML = ''; // Limpiar el contenido del selector
+}
+
+
+async function consultarPlantillasScript(){
     const plantillas = await consultarPlantillas();
     const selectorPlantilla = document.getElementById('selectorPlantilla');
+    vaciarSelectorPlantillas(); // Limpiar el selector antes de agregar nuevas opciones
     plantillas.datos.forEach(plantilla => {
         const option = document.createElement('option');
         option.value = plantilla.titulo;
@@ -11,4 +18,8 @@ async function setup(){
     })
 }
 
-setup();
\ No newline at end of file
+consultarPlantillasScript();
+
+// module.exports = {
+//     consultarPlantillas,
+// };
\ No newline at end of file
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
index 35794b38..8a2f7bd4 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
@@ -1,18 +1,58 @@
 const { crearPlantilla } = require(`${rutaBase}src/backend/casosUso/plantillas/crearPlantilla.js`);
+// const { consultarPlantillas } = require(`${rutaBase}src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js`);
 // const { mostrarAlerta } = require(`${rutaBase}/src/framework/vistas/includes/componentes/moleculas/alertaSwal/alertaSwal`);
 
-function setup(){
+function crearPlantillaScript(){
     const nombrePlantilla = document.getElementById('nombrePlantilla');
     const botonGuardarPlantilla = document.getElementById('botonGuardarPlantilla');
 
     botonGuardarPlantilla.addEventListener('click', async () => {
-        const respuesta = await crearPlantilla(nombrePlantilla.value, 'prueba de datos');
+        const contenidoPlantilla = obtenerJsonPlantillaDesdeDOM();
+        const respuesta = await crearPlantilla(nombrePlantilla.value, contenidoPlantilla);
         if (respuesta.ok) {
             mostrarAlerta('Correcto', 'Plantilla guardada correctamente', 'success');
+            vaciarSelectorPlantillas
+            await consultarPlantillasScript(); // Actualizar el selector de plantillas
         } else {
             mostrarAlerta('Error', 'Error al guardar la plantilla: ' + respuesta.error, 'error');
         }
     });
 }
 
-setup();
\ No newline at end of file
+crearPlantillaScript();
+
+
+
+function obtenerJsonPlantillaDesdeDOM(){
+    const componentes = [];
+
+    const contenedorComponentes = document.getElementById('contenedorElementos')
+    console.log('contenedor componentes:', contenedorComponentes);
+    Array.from(contenedorComponentes.children).forEach(componente => {
+        console.log(componente);
+        if(componente.classList.contains('tarjeta-texto')){
+            componentes.push({
+                componente: "texto",
+                tipo: componente.querySelector('.tipo-texto').value,
+                contenido: componente.querySelector('.area-escritura').value,
+                alineamiento: componente.querySelector('.icono-align').classList[1]
+            });
+
+        } else if(componente.classList.contains('tarjeta-grafica')){
+
+            componentes.push({
+                componente: "grafica",
+                nombre : componente.querySelector('.titulo-grafica').value,
+                tipo : componente.querySelector('.tipo-grafica').value,
+                tractor : componente.querySelector('.tractor-grafica').value,
+                color: componente.querySelector('#color-entrada').value,
+                parametro : '',
+                filtro : 'Filtro encendido',
+                formula : 'Exceso de Gasolina'
+            })
+            
+        }
+    });
+
+    return JSON.stringify(componentes);
+}
\ No newline at end of file
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js
index 08c4870b..14741c14 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js
@@ -1,6 +1,7 @@
 const { eliminarPlantilla } = require(`${rutaBase}src/backend/casosUso/plantillas/eliminarPlantilla.js`);
+// const { consultarPlantillas } = require(`${rutaBase}src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js`);
 
-function setup(){
+function eliminarPlantillaScript(){
     const nombrePlantilla = document.getElementById('selectorPlantilla');
     const botonEliminarPlantilla = document.getElementById('botonEliminarPlantilla');
 
@@ -8,10 +9,12 @@ function setup(){
         const respuesta = await eliminarPlantilla(nombrePlantilla.value);
         if (respuesta.ok) {
             mostrarAlerta('Correcto', 'Plantilla eliminada correctamente', 'success');
+            vaciarSelectorPlantillas(); 
+            await consultarPlantillasScript(); // Actualizar el selector de plantillas
         } else {
             mostrarAlerta('Error', 'Error al eliminar la plantilla: ' + respuesta.error, 'error');
         }
     });
 }
 
-setup();
\ No newline at end of file
+eliminarPlantillaScript();
\ No newline at end of file
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/json.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/jsonPlantilla.js
similarity index 100%
rename from harvester-app/src/framework/utils/scripts/paginas/plantillas/json.js
rename to harvester-app/src/framework/utils/scripts/paginas/plantillas/jsonPlantilla.js
diff --git a/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs b/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs
index 8607ff7a..232d96d0 100644
--- a/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs
+++ b/harvester-app/src/framework/vistas/paginas/analisis/generarReporte.ejs
@@ -45,8 +45,9 @@
   </div>
   
   <script src='<%= rutaBase %>src/framework/utils/scripts/paginas/analisis/moduloAnalisis.js'></script>
-  <script src='<%= rutaBase %>src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js'></script>
   <script src='<%= rutaBase %>src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js'></script>
+  <script src='<%= rutaBase %>src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js'></script>
   <script src='<%= rutaBase %>src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js'></script>
+  <script src='<%= rutaBase %>src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js'></script>
 
 <%- include ('../../includes/piePagina.ejs')%>
\ No newline at end of file

From 314f5deb468a81a0e40d940e19d8be91c4b5d58b Mon Sep 17 00:00:00 2001
From: Diego <a01705506@tec.mx>
Date: Fri, 25 Jul 2025 10:50:43 -0600
Subject: [PATCH 06/18] Filtros guardados

---
 .../paginas/analisis/agregarGrafica.js        |  8 +++-
 .../scripts/paginas/analisis/agregarTexto.js  |  3 +-
 .../analisis/formulas/crearCuadroFormulas.js  | 11 ++++-
 .../analisis/formulas/crearMenuFiltros.js     |  8 ++++
 .../analisis/formulas/crearMenuParametros.js  |  5 ++
 .../paginas/plantillas/cargarPlantilla.js     | 47 +++++++++++++++----
 .../paginas/plantillas/crearPlantilla.js      |  7 +--
 7 files changed, 71 insertions(+), 18 deletions(-)

diff --git a/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js b/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js
index c156fd4b..00e39fce 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js
@@ -143,8 +143,10 @@ function agregarGrafica(contenedorId, previsualizacionId, tarjetaRef = null, pos
   }
 
   // Actualizar la llamada en el event listener del botón de fórmulas
-  tarjetaGrafica.querySelector('.boton-formulas').addEventListener('click', async () =>
-    await crearCuadroFormulas(nuevaId, formulasDisponibles, datosOriginalesFormulas, tractorSeleccionado));
+  tarjetaGrafica.querySelector('.boton-formulas').addEventListener('click', async () => {
+    tractorSeleccionado = selectorTractor.value;
+    await crearCuadroFormulas(nuevaId, formulasDisponibles, datosOriginalesFormulas, tractorSeleccionado);
+  });
 
   const graficaDiv = document.createElement('div');
   graficaDiv.className = 'previsualizacion-grafica';
@@ -400,4 +402,6 @@ function hexARGB(colorHex) {
 
 module.exports = {
   agregarGrafica,
+  modificarTipoGrafica,
+  modificarColor,
 };
\ No newline at end of file
diff --git a/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarTexto.js b/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarTexto.js
index 03bc19ec..ddaf3f93 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarTexto.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarTexto.js
@@ -289,5 +289,6 @@ function configurarObservadorLimite(contenedor) {
 }
 
 module.exports = {
-  agregarTexto
+  agregarTexto,
+  actualizarTexto
 };
\ No newline at end of file
diff --git a/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearCuadroFormulas.js b/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearCuadroFormulas.js
index 53125a40..8baa3081 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearCuadroFormulas.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearCuadroFormulas.js
@@ -143,18 +143,25 @@ async function crearCuadroFormulas(graficaId, formulasDisponibles, datosOriginal
 
         // Obtener los datos directamente de las propiedades del elemento
         const nombreFormula = inputRadio.formulaNombre;
-        const datosFormula = inputRadio.formulaDatos;
 
+        
+        const datosFormula = inputRadio.formulaDatos;
+        
         // Verificar que los datos están completos
         if (!datosFormula || datosFormula.trim() === '') {
           mostrarAlerta('Error', 'Los datos de la fórmula están vacíos o incompletos.', 'error');
           if (textoAplicar) textoAplicar.textContent = 'Aplicar Fórmula';
           return;
         }
-
+        
         // Obtener la gráfica asociada
         const graficaId = cuadroFormulas.dataset.graficaId;
         const graficaDiv = document.getElementById(`previsualizacion-grafica-${graficaId}`);
+        
+        const graficaDiv2 = document.querySelector(`#\\3${graficaId}.tarjeta-grafica`);
+        if (graficaDiv2) {
+          graficaDiv2.dataset.formulaActual = nombreFormula;
+        }
 
         if (!graficaDiv) {
           mostrarAlerta('Error', 'No se encontró la gráfica asociada.', 'error');
diff --git a/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearMenuFiltros.js b/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearMenuFiltros.js
index c0113d89..c2fe004f 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearMenuFiltros.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearMenuFiltros.js
@@ -25,6 +25,14 @@ function crearMenuFiltros(contenedor, filtros, graficaId, contenedorParametros,
   // Agregar evento de cambio para actualizar la gráfica
   seleccionValores.addEventListener('change', () => {
     // Si se deselecciona, resetear la gráfica a estado inicial
+    // const element = document.querySelector('.tarjeta-grafica#\\31');
+    const graficaDiv = document.querySelector(`#\\3${graficaId}.tarjeta-grafica`);
+    if (graficaDiv) {
+      graficaDiv.dataset.filtroActual = seleccionValores.value;
+    }
+
+
+
     const selectorParametro = contenedorParametros.querySelector('select');
 
     const filtroAplicado = filtros.filter(filtro => {
diff --git a/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearMenuParametros.js b/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearMenuParametros.js
index a13ff7fe..ce0133df 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearMenuParametros.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearMenuParametros.js
@@ -25,6 +25,11 @@ function crearMenuParametros(contenedor, columnas, graficaId, datosOriginalesFor
   // Agregar evento de cambio para actualizar la gráfica
   seleccionValores.addEventListener('change', (evento) => {
 
+    const graficaDiv = document.querySelector(`#\\3${graficaId}.tarjeta-grafica`);
+    if (graficaDiv) {
+      graficaDiv.dataset.parametroActual = seleccionValores.value;
+    }
+
     const filtroAplicado = filtrosDisponibles.filter(filtro => {
       return contenedorFiltros.querySelector('.opcion-texto').value == filtro.Nombre;
     });
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
index 0c55385d..c62dde44 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
@@ -2,6 +2,9 @@ const { consultarPlantilla } = require(`${rutaBase}src/backend/casosUso/plantill
 // const { consultarPlantillas } = require(`${rutaBase}src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js`);
 // const { configurarTexto } = require(`${rutaBase}src/framework/utils/scripts/paginas/analisis/agregarTexto.js`);
 // const { agregarGrafica } = require(`${rutaBase}src/framework/utils/scripts/paginas/analisis/agregarGrafica.js`);
+const { actualizarTexto } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/agregarTexto.js`);
+const { modificarTipoGrafica, modificarColor } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js`);
+const { ElementoNuevo, Contenedores } = require(`${rutaBase}/src/backend/data/analisisModelos/elementoReporte.js`);
 
 // const { configurarTexto, configurarGrafica } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/botonesAgregar.js`);
 
@@ -31,9 +34,11 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
     try {
         const componentes = json;
         const contenedor = document.querySelector(`#${contenedorId}`);
+        const contenedorPrevisualizacion = document.querySelector(`#${idContenedorPrevisualizacion}`);
         
         // Limpiar el contenedor
         contenedor.innerHTML = '';
+        contenedorPrevisualizacion.innerHTML = '';
 
         // Iterar sobre cada componente
         for (const componente of componentes) {
@@ -43,6 +48,7 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                 configurarTexto(contenedorId, idContenedorPrevisualizacion);
                 
                 const tarjetaTexto = contenedor.querySelector(`.tarjeta-texto:last-child`);
+                const previsualizacionTexto = contenedorPrevisualizacion.querySelector(`.previsualizacion-texto.preview-titulo:last-child`);
                 
                 if (tarjetaTexto) {
                     // Configurar propiedades
@@ -50,14 +56,28 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                     const areaEscritura = tarjetaTexto.querySelector('.area-escritura');
                     const iconoAlign = tarjetaTexto.querySelector('.icono-align');
                     
-                    if (tipoTexto) tipoTexto.value = componente.tipo;
+                    if (tipoTexto) { 
+                        tipoTexto.value = componente.tipo;
+                        previsualizacionTexto.classList.remove('preview-titulo', 'preview-subtitulo', 'preview-contenido');
+                        previsualizacionTexto.classList.add(`preview-${componente.tipo}`);
+                    };
+
                     if (areaEscritura) areaEscritura.value = componente.contenido;
                     
                     // Configurar alineamiento
                     if (iconoAlign) {
                         iconoAlign.classList.remove('align-left', 'align-center', 'align-right');
                         iconoAlign.classList.add(componente.alineamiento);
+                        const alineaciones = ['left', 'center', 'right'];
+                        previsualizacionTexto.alignIndex = (previsualizacionTexto.alignIndex + 1) % alineaciones.length;
+                        const alineado = alineaciones[previsualizacionTexto.alignIndex];
+                        previsualizacionTexto.style.textAlign = alineado;
+                        iconoAlign.className = `icono-align align-${alineado}`;
                     }
+                    
+                    // const vistaPrevia = tarjetaTexto.querySelector('.previsualizacion-texto.preview-titulo');
+                    console.log('vista previa:', previsualizacionTexto);
+                    actualizarTexto(previsualizacionTexto, areaEscritura);
                 }
 
                 // console.log('texto configurado')
@@ -88,19 +108,26 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                         color: tarjetaGrafica.querySelector('#color-entrada')
                     };
                     
+                    const previsualizacionGrafica = contenedorPrevisualizacion.querySelector(`.previsualizacion-grafica:last-child`);
+
+                    empaquetador = {value: componente.tipo} //estos empaquetamientos sirven para que al usar las funciones piense que le estas pasando un componente de html, ya que dentro de la función solo usa el componente para sacarle el valor.
+                    empaquetador2 = {value: componente.color}
+
                     if (elementos.titulo) elementos.titulo.value = componente.nombre;
-                    if (elementos.tipo) elementos.tipo.value = componente.tipo;
+
+                    if (elementos.tipo){
+                        elementos.tipo.value = componente.tipo;
+                        modificarTipoGrafica(previsualizacionGrafica, empaquetador, componente.nombre);
+                    }
+
+                    if (elementos.color) {
+                        elementos.color.value = componente.color;
+                        modificarColor(empaquetador2, previsualizacionGrafica, 0)
+                    }
                     if (elementos.tractor) elementos.tractor.value = componente.tractor;
-                    if (elementos.color) elementos.color.value = componente.color;
+                    tractorSeleccionado = componente.tractor;
                 }
 
-                // Configurar propiedades
-                // tarjetaGrafica.querySelector('.titulo-grafica').value = componente.nombre;
-                // tarjetaGrafica.querySelector('.tipo-grafica').value = componente.tipo;
-                // tarjetaGrafica.querySelector('.tractor-grafica').value = componente.tractor;
-                // tarjetaGrafica.querySelector('#color-entrada').value = componente.color;
-                
-                // Si tienes más propiedades específicas de la gráfica, configúralas aquí
             }
         }
     } catch (error) {
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
index 8a2f7bd4..1768977b 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
@@ -27,6 +27,7 @@ function obtenerJsonPlantillaDesdeDOM(){
     const componentes = [];
 
     const contenedorComponentes = document.getElementById('contenedorElementos')
+
     console.log('contenedor componentes:', contenedorComponentes);
     Array.from(contenedorComponentes.children).forEach(componente => {
         console.log(componente);
@@ -46,9 +47,9 @@ function obtenerJsonPlantillaDesdeDOM(){
                 tipo : componente.querySelector('.tipo-grafica').value,
                 tractor : componente.querySelector('.tractor-grafica').value,
                 color: componente.querySelector('#color-entrada').value,
-                parametro : '',
-                filtro : 'Filtro encendido',
-                formula : 'Exceso de Gasolina'
+                parametro : componente.dataset.parametroActual,
+                filtro : componente.dataset.filtroActual,
+                formula : componente.dataset.formulaActual,
             })
             
         }

From 6194a544814340327bc3a50fa718df9bf41952f1 Mon Sep 17 00:00:00 2001
From: Diego <a01705506@tec.mx>
Date: Fri, 25 Jul 2025 11:44:40 -0600
Subject: [PATCH 07/18] progreso

---
 .../analisis/formulas/crearCuadroFormulas.js  |  4 +-
 .../paginas/plantillas/cargarPlantilla.js     | 45 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearCuadroFormulas.js b/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearCuadroFormulas.js
index 8baa3081..195300f6 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearCuadroFormulas.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearCuadroFormulas.js
@@ -146,6 +146,8 @@ async function crearCuadroFormulas(graficaId, formulasDisponibles, datosOriginal
 
         
         const datosFormula = inputRadio.formulaDatos;
+
+        console.log('Datos de la fórmula:', datosFormula, 'Nombre de la fórmula:', nombreFormula);
         
         // Verificar que los datos están completos
         if (!datosFormula || datosFormula.trim() === '') {
@@ -157,7 +159,7 @@ async function crearCuadroFormulas(graficaId, formulasDisponibles, datosOriginal
         // Obtener la gráfica asociada
         const graficaId = cuadroFormulas.dataset.graficaId;
         const graficaDiv = document.getElementById(`previsualizacion-grafica-${graficaId}`);
-        
+
         const graficaDiv2 = document.querySelector(`#\\3${graficaId}.tarjeta-grafica`);
         if (graficaDiv2) {
           graficaDiv2.dataset.formulaActual = nombreFormula;
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
index c62dde44..88d02bda 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
@@ -5,6 +5,9 @@ const { consultarPlantilla } = require(`${rutaBase}src/backend/casosUso/plantill
 const { actualizarTexto } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/agregarTexto.js`);
 const { modificarTipoGrafica, modificarColor } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js`);
 const { ElementoNuevo, Contenedores } = require(`${rutaBase}/src/backend/data/analisisModelos/elementoReporte.js`);
+const { aplicarFormula } = require(`${rutaBase}/src/backend/casosUso/formulas/aplicarFormula.js`);
+const { filtrarDatos } = require(`${rutaBase}/src/backend/casosUso/formulas/filtrarDatos.js`);
+const Chart = require(`${rutaBase}/node_modules/chart.js/auto`);
 
 // const { configurarTexto, configurarGrafica } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/botonesAgregar.js`);
 
@@ -92,7 +95,7 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                 // iconoAlign.classList.remove('align-left', 'align-center', 'align-right');
                 // iconoAlign.classList.add(componente.alineamiento);
                 
-            } else if (componente.componente == "grafica") {~
+            } else if (componente.componente == "grafica") {
                 console.log('es una grafica!')
                 // Crear tarjeta de gráfica
                 configurarGrafica(contenedorId, idContenedorPrevisualizacion);
@@ -125,11 +128,49 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                         modificarColor(empaquetador2, previsualizacionGrafica, 0)
                     }
                     if (elementos.tractor) elementos.tractor.value = componente.tractor;
-                    tractorSeleccionado = componente.tractor;
+                    const tractorSeleccionado = componente.tractor;
+
+                    if(componente.parametro && !componente.formula) {
+
+                    }
+                    if (componente.formula){
+                        if(componente.filtro){
+                            const datosFiltrados = filtrarDatos(componente.filtro, JSON.parse(localStorage.getItem('datosFiltradosExcel')), tractorSeleccionado);
+                            for(const formula of JSON.parse(localStorage.formulasDisponibles)){
+                                if (formula.Nombre == componente.formula)
+                                {
+                                    const resultadoFormula = aplicarFormula(formula.Nombre, formula.Datos, tractorSeleccionado, datosFiltrados.resultados);
+                                    const canvas = previsualizacionGrafica.querySelector('canvas');
+                        
+                                    const contexto = canvas.getContext('2d');
+                                    const graficaExistente = Chart.getChart(contexto);
+                        
+                                    if (graficaExistente && resultadoFormula.resultados) {
+                                        const resultados = resultadoFormula.resultados;
+                                        const tipoGrafica = graficaExistente.config.type;
+                            
+                                        // Usar el procesamiento universal
+                                        const datosRebuild = procesarDatosUniversal(resultados, tipoGrafica, formula.Nombre);
+                            
+                                        // Actualizar la gráfica
+                                        graficaExistente.options.plugins.title.text = nombreFormula;
+                                        graficaExistente.data.labels = datosRebuild.labels;
+                                        graficaExistente.data.datasets[0].data = datosRebuild.valores;
+                            
+                                        // CORRECCIÓN: Actualizar también la etiqueta del dataset
+                                        graficaExistente.data.datasets[0].label = nombreFormula;
+                            
+                                        graficaExistente.update();
+                                    }
+                            }
+                        }
+                        
+                    }
                 }
 
             }
         }
+    }
     } catch (error) {
         console.error('Error al cargar la plantilla:', error);
         mostrarAlerta('Error', 'No se pudo cargar la plantilla correctamente', 'error');

From 0f4619424a3305d82ce9fd95c495ecce7f1c70fd Mon Sep 17 00:00:00 2001
From: DanielQueijeiro <dany.queijeiro@hotmail.com>
Date: Fri, 25 Jul 2025 20:28:44 -0600
Subject: [PATCH 08/18] Mejorar css de plantillas

---
 .../framework/utils/css/paginas/plantillas/plantillas.css   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css b/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
index 11005451..899cf79d 100644
--- a/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
+++ b/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
@@ -24,7 +24,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
-    width: 100%;
+    width: 80%;
     height: 3em;
     /* padding: 0.5em; */
 }
@@ -35,7 +35,7 @@
     border-radius: 0.33em;
     border: none;
     padding: 0.5em 1em;
-    margin: 0.5em;
+    margin: 0.5em 0 0 0.5em;
     background-color: #ffffff;
 }
 
@@ -49,7 +49,7 @@
     border-radius: 0.33em;
     border: none;
     padding: 0.5em 1em;
-    margin: 0.5em;
+    margin: 0.5em 0 0 0.5em;
     background-color: #a61930;
     color: #ffffff;
 }

From 62bc663935550e3870bafa54aedbad40a6e3c1cf Mon Sep 17 00:00:00 2001
From: DanielQueijeiro <dany.queijeiro@hotmail.com>
Date: Fri, 25 Jul 2025 20:29:02 -0600
Subject: [PATCH 09/18] Hacer que cuando carguen una plantilla los contadores
 sean correctos

---
 .../scripts/paginas/analisis/agregarGrafica.js   |  1 +
 .../scripts/paginas/analisis/agregarTexto.js     |  3 ++-
 .../paginas/plantillas/cargarPlantilla.js        | 16 ++++++++++++----
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js b/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js
index 00e39fce..0dbe1be3 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js
@@ -404,4 +404,5 @@ module.exports = {
   agregarGrafica,
   modificarTipoGrafica,
   modificarColor,
+  modificarTitulo
 };
\ No newline at end of file
diff --git a/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarTexto.js b/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarTexto.js
index ddaf3f93..9827f6d7 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarTexto.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarTexto.js
@@ -290,5 +290,6 @@ function configurarObservadorLimite(contenedor) {
 
 module.exports = {
   agregarTexto,
-  actualizarTexto
+  actualizarTexto,
+  actualizarCaracteres
 };
\ No newline at end of file
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
index 88d02bda..c7106088 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
@@ -2,8 +2,8 @@ const { consultarPlantilla } = require(`${rutaBase}src/backend/casosUso/plantill
 // const { consultarPlantillas } = require(`${rutaBase}src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js`);
 // const { configurarTexto } = require(`${rutaBase}src/framework/utils/scripts/paginas/analisis/agregarTexto.js`);
 // const { agregarGrafica } = require(`${rutaBase}src/framework/utils/scripts/paginas/analisis/agregarGrafica.js`);
-const { actualizarTexto } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/agregarTexto.js`);
-const { modificarTipoGrafica, modificarColor } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js`);
+const { actualizarTexto, actualizarCaracteres } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/agregarTexto.js`);
+const { modificarTipoGrafica, modificarColor, modificarTitulo } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js`);
 const { ElementoNuevo, Contenedores } = require(`${rutaBase}/src/backend/data/analisisModelos/elementoReporte.js`);
 const { aplicarFormula } = require(`${rutaBase}/src/backend/casosUso/formulas/aplicarFormula.js`);
 const { filtrarDatos } = require(`${rutaBase}/src/backend/casosUso/formulas/filtrarDatos.js`);
@@ -81,6 +81,11 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                     // const vistaPrevia = tarjetaTexto.querySelector('.previsualizacion-texto.preview-titulo');
                     console.log('vista previa:', previsualizacionTexto);
                     actualizarTexto(previsualizacionTexto, areaEscritura);
+                    
+                    // Actualizar el contador de caracteres después de cargar el contenido
+                    if (areaEscritura) {
+                        actualizarCaracteres(tarjetaTexto, areaEscritura);
+                    }
                 }
 
                 // console.log('texto configurado')
@@ -127,8 +132,11 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                         elementos.color.value = componente.color;
                         modificarColor(empaquetador2, previsualizacionGrafica, 0)
                     }
-                    if (elementos.tractor) elementos.tractor.value = componente.tractor;
-                    const tractorSeleccionado = componente.tractor;
+                    
+                    // Actualizar el contador de caracteres del título de la gráfica
+                    if (elementos.titulo) {
+                        modificarTitulo(previsualizacionGrafica, elementos.titulo, tarjetaGrafica);
+                    }
 
                     if(componente.parametro && !componente.formula) {
 

From 6740d52b2a8e8a94ba203d8b60a56c53248ac2c0 Mon Sep 17 00:00:00 2001
From: DanielQueijeiro <dany.queijeiro@hotmail.com>
Date: Fri, 25 Jul 2025 20:44:48 -0600
Subject: [PATCH 10/18] mejorar de nuevo estetica xd

---
 .../framework/utils/css/paginas/analisis/generarReporte.css    | 3 +++
 .../src/framework/utils/css/paginas/plantillas/plantillas.css  | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/harvester-app/src/framework/utils/css/paginas/analisis/generarReporte.css b/harvester-app/src/framework/utils/css/paginas/analisis/generarReporte.css
index ccdd6780..1a309efb 100644
--- a/harvester-app/src/framework/utils/css/paginas/analisis/generarReporte.css
+++ b/harvester-app/src/framework/utils/css/paginas/analisis/generarReporte.css
@@ -35,6 +35,9 @@ body,
   overflow-x: auto;
 }
 
+.ventana-principal{
+  width: 100%;
+}
 .seccion-elemento-reporte {
   display: grid;
   grid-template-rows: auto, 1fr auto;
diff --git a/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css b/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
index 899cf79d..31faf52f 100644
--- a/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
+++ b/harvester-app/src/framework/utils/css/paginas/plantillas/plantillas.css
@@ -24,7 +24,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
-    width: 80%;
+    width: 100%;
     height: 3em;
     /* padding: 0.5em; */
 }

From 494ea2cc6cf9293b819ceb8d557b54779baeefe3 Mon Sep 17 00:00:00 2001
From: DanielQueijeiro <dany.queijeiro@hotmail.com>
Date: Fri, 25 Jul 2025 20:44:58 -0600
Subject: [PATCH 11/18] mensaje de limite de caracteres en titulo

---
 .../paginas/plantillas/crearPlantilla.js        | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
index 1768977b..6f21222d 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
@@ -5,8 +5,11 @@ const { crearPlantilla } = require(`${rutaBase}src/backend/casosUso/plantillas/c
 function crearPlantillaScript(){
     const nombrePlantilla = document.getElementById('nombrePlantilla');
     const botonGuardarPlantilla = document.getElementById('botonGuardarPlantilla');
-
     botonGuardarPlantilla.addEventListener('click', async () => {
+        if (nombrePlantilla.value.trim().length > 50) {
+            mostrarAlerta('Error', 'El nombre de la plantilla no debe exceder 50 caracteres', 'error');
+            return;
+        }
         const contenidoPlantilla = obtenerJsonPlantillaDesdeDOM();
         const respuesta = await crearPlantilla(nombrePlantilla.value, contenidoPlantilla);
         if (respuesta.ok) {
@@ -20,7 +23,7 @@ function crearPlantillaScript(){
 }
 
 crearPlantillaScript();
-
+verificarCaracteresTitulo();
 
 
 function obtenerJsonPlantillaDesdeDOM(){
@@ -56,4 +59,14 @@ function obtenerJsonPlantillaDesdeDOM(){
     });
 
     return JSON.stringify(componentes);
+}
+
+function verificarCaracteresTitulo(){
+    const nombrePlantilla = document.getElementById('nombrePlantilla');
+    nombrePlantilla.addEventListener('input', () => {
+        if (nombrePlantilla.value.length >= 50) {
+            mostrarAlerta('Advertencia', 'Has alcanzado el límite máximo de 50 caracteres', 'warning');
+            nombrePlantilla.value = nombrePlantilla.value.substring(0, 50);
+        }
+    });
 }
\ No newline at end of file

From a5c019fe57af709f89d922880259f9378ed382d1 Mon Sep 17 00:00:00 2001
From: DanielQueijeiro <dany.queijeiro@hotmail.com>
Date: Fri, 25 Jul 2025 22:48:49 -0600
Subject: [PATCH 12/18] verificar datos

---
 .../scripts/paginas/analisis/agregarTexto.js  |   3 +-
 .../paginas/plantillas/cargarPlantilla.js     | 235 ++++++++++++++----
 2 files changed, 189 insertions(+), 49 deletions(-)

diff --git a/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarTexto.js b/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarTexto.js
index 9827f6d7..4daa0f77 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarTexto.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/analisis/agregarTexto.js
@@ -291,5 +291,6 @@ function configurarObservadorLimite(contenedor) {
 module.exports = {
   agregarTexto,
   actualizarTexto,
-  actualizarCaracteres
+  actualizarCaracteres,
+  validarBotonAlinear
 };
\ No newline at end of file
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
index c7106088..cef38620 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
@@ -2,7 +2,7 @@ const { consultarPlantilla } = require(`${rutaBase}src/backend/casosUso/plantill
 // const { consultarPlantillas } = require(`${rutaBase}src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js`);
 // const { configurarTexto } = require(`${rutaBase}src/framework/utils/scripts/paginas/analisis/agregarTexto.js`);
 // const { agregarGrafica } = require(`${rutaBase}src/framework/utils/scripts/paginas/analisis/agregarGrafica.js`);
-const { actualizarTexto, actualizarCaracteres } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/agregarTexto.js`);
+const { actualizarTexto, actualizarCaracteres, validarBotonAlinear } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/agregarTexto.js`);
 const { modificarTipoGrafica, modificarColor, modificarTitulo } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/agregarGrafica.js`);
 const { ElementoNuevo, Contenedores } = require(`${rutaBase}/src/backend/data/analisisModelos/elementoReporte.js`);
 const { aplicarFormula } = require(`${rutaBase}/src/backend/casosUso/formulas/aplicarFormula.js`);
@@ -16,26 +16,65 @@ function cargarPlantillaScript(){
     const botonCargarPlantilla = document.getElementById('botonCargarPlantilla');
 
     botonCargarPlantilla.addEventListener('click', async () => {
-        const respuesta = await consultarPlantilla(nombrePlantilla.value);
-        console.log('plantilla cargada:', respuesta);
-        const contenido = JSON.parse(respuesta.datos.contenido);
-        console.log('contenido:', contenido);
-        const idContenedor = 'contenedorElementos';
-        const idContenedorPrevisualizacion = 'contenedor-elementos-previsualizacion';
-        await cargarPlantillaDesdeJSON(contenido, idContenedor, idContenedorPrevisualizacion);
-
-        if (respuesta.ok) {
-            mostrarAlerta('Correcto', 'Plantilla cargada correctamente', 'success');
-        } else {
-            mostrarAlerta('Error', 'Error al cargar la plantilla: ' + respuesta.error, 'error');
+        try {
+            const respuesta = await consultarPlantilla(nombrePlantilla.value);
+            console.log('plantilla cargada:', respuesta);
+            
+            if (!respuesta.ok) {
+                mostrarAlerta('Error', 'Error al cargar la plantilla: ' + respuesta.error, 'error');
+                return;
+            }
+            
+            const contenido = JSON.parse(respuesta.datos.contenido);
+            console.log('contenido:', contenido);
+            const idContenedor = 'contenedorElementos';
+            const idContenedorPrevisualizacion = 'contenedor-elementos-previsualizacion';
+            
+            // Cargar la plantilla y verificar si fue exitosa
+            const cargaExitosa = await cargarPlantillaDesdeJSON(contenido, idContenedor, idContenedorPrevisualizacion);
+            
+            // Solo mostrar alerta de éxito si la carga fue exitosa
+            if (cargaExitosa) {
+                mostrarAlerta('Correcto', 'Plantilla cargada correctamente', 'success');
+            }
+            
+        } catch (error) {
+            console.error('Error en cargarPlantillaScript:', error);
+            mostrarAlerta('Error', 'Error inesperado al cargar la plantilla', 'error');
         }
     });
 }
 
-
 async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisualizacion) {
     try {
         const componentes = json;
+        
+        // Obtener datos de Excel desde localStorage
+        const datosExcel = JSON.parse(localStorage.getItem('datosFiltradosExcel') || '{}');
+        
+        // Verificar que existan datos de Excel cargados
+        if (!datosExcel.hojas || Object.keys(datosExcel.hojas).length === 0) {
+            mostrarAlerta('Error', 'No hay datos de Excel cargados. Carga un archivo Excel primero.', 'warning');
+            return false; // Retornar false para indicar que la carga falló
+        }
+
+        // Verificar columnas requeridas antes de cargar la plantilla
+        const verificacionResultado = verificarColumnasRequeridas(componentes, datosExcel);
+        if (!verificacionResultado.valido) {
+            // Formatear el mensaje igual que en aplicarFormula.js
+            const columnasFaltantesTexto = verificacionResultado.columnasFaltantes
+                .map(item => item.split(': ')[1]) // Extraer solo el nombre de la columna
+                .filter((valor, indice, array) => array.indexOf(valor) === indice) // Eliminar duplicados
+                .join(', ');
+            
+            mostrarAlerta(
+                `Columnas no encontradas: ${columnasFaltantesTexto}`, 
+                'Asegúrate de haber seleccionado todas las columnas necesarias para aplicar las fórmulas de esta plantilla.', 
+                'error'
+            );
+            return false; // Retornar false para indicar que la carga falló
+        }
+
         const contenedor = document.querySelector(`#${contenedorId}`);
         const contenedorPrevisualizacion = document.querySelector(`#${idContenedorPrevisualizacion}`);
         
@@ -58,6 +97,7 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                     const tipoTexto = tarjetaTexto.querySelector('.tipo-texto');
                     const areaEscritura = tarjetaTexto.querySelector('.area-escritura');
                     const iconoAlign = tarjetaTexto.querySelector('.icono-align');
+                    const botonAlinear = tarjetaTexto.querySelector('.alinear');
                     
                     if (tipoTexto) { 
                         tipoTexto.value = componente.tipo;
@@ -86,6 +126,11 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                     if (areaEscritura) {
                         actualizarCaracteres(tarjetaTexto, areaEscritura);
                     }
+                    
+                    // Validar el botón alinear después de cargar el contenido
+                    if (areaEscritura && botonAlinear) {
+                        validarBotonAlinear(areaEscritura, botonAlinear);
+                    }
                 }
 
                 // console.log('texto configurado')
@@ -141,48 +186,142 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                     if(componente.parametro && !componente.formula) {
 
                     }
-                    if (componente.formula){
-                        if(componente.filtro){
-                            const datosFiltrados = filtrarDatos(componente.filtro, JSON.parse(localStorage.getItem('datosFiltradosExcel')), tractorSeleccionado);
-                            for(const formula of JSON.parse(localStorage.formulasDisponibles)){
-                                if (formula.Nombre == componente.formula)
-                                {
-                                    const resultadoFormula = aplicarFormula(formula.Nombre, formula.Datos, tractorSeleccionado, datosFiltrados.resultados);
-                                    const canvas = previsualizacionGrafica.querySelector('canvas');
-                        
-                                    const contexto = canvas.getContext('2d');
-                                    const graficaExistente = Chart.getChart(contexto);
-                        
-                                    if (graficaExistente && resultadoFormula.resultados) {
-                                        const resultados = resultadoFormula.resultados;
-                                        const tipoGrafica = graficaExistente.config.type;
-                            
-                                        // Usar el procesamiento universal
-                                        const datosRebuild = procesarDatosUniversal(resultados, tipoGrafica, formula.Nombre);
-                            
-                                        // Actualizar la gráfica
-                                        graficaExistente.options.plugins.title.text = nombreFormula;
-                                        graficaExistente.data.labels = datosRebuild.labels;
-                                        graficaExistente.data.datasets[0].data = datosRebuild.valores;
-                            
-                                        // CORRECCIÓN: Actualizar también la etiqueta del dataset
-                                        graficaExistente.data.datasets[0].label = nombreFormula;
-                            
-                                        graficaExistente.update();
-                                    }
-                            }
-                        }
+                //     if (componente.formula){
+                //         if(componente.filtro){
+                //             const datosFiltrados = filtrarDatos(componente.filtro, JSON.parse(localStorage.getItem('datosFiltradosExcel')), tractorSeleccionado);
+                //             for(const formula of JSON.parse(localStorage.formulasDisponibles)){
+                //                 if (formula.Nombre == componente.formula)
+                //                 {
+                //                     const resultadoFormula = aplicarFormula(formula.Nombre, formula.Datos, tractorSeleccionado, datosFiltrados.resultados);
+                //                     const canvas = previsualizacionGrafica.querySelector('canvas');
+        
+                //                     const contexto = canvas.getContext('2d');
+                //                     const graficaExistente = Chart.getChart(contexto);
+        
+                //                     if (graficaExistente && resultadoFormula.resultados) {
+                //                         const resultados = resultadoFormula.resultados;
+                //                         const tipoGrafica = graficaExistente.config.type;
+            
+                //                         // Usar el procesamiento universal
+                //                         const datosRebuild = procesarDatosUniversal(resultados, tipoGrafica, formula.Nombre);
+            
+                //                         // Actualizar la gráfica
+                //                         graficaExistente.options.plugins.title.text = nombreFormula;
+                //                         graficaExistente.data.labels = datosRebuild.labels;
+                //                         graficaExistente.data.datasets[0].data = datosRebuild.valores;
+            
+                //                         // CORRECCIÓN: Actualizar también la etiqueta del dataset
+                //                         graficaExistente.data.datasets[0].label = nombreFormula;
+            
+                //                         graficaExistente.update();
+                //                     }
+                //             }
+                //         }
                         
-                    }
-                }
+                //     }
+                // }
 
+                }
             }
         }
-    }
+
+        return true; // Retornar true para indicar que la carga fue exitosa
+        
     } catch (error) {
         console.error('Error al cargar la plantilla:', error);
         mostrarAlerta('Error', 'No se pudo cargar la plantilla correctamente', 'error');
+        return false; // Retornar false para indicar que la carga falló
+    }
+}
+
+/**
+ * Verifica que todas las columnas requeridas por las fórmulas de la plantilla estén disponibles
+ * @param {Array} componentes - Componentes de la plantilla
+ * @param {Object} datosExcel - Datos de Excel disponibles
+ * @returns {Object} Resultado de la verificación
+ */
+function verificarColumnasRequeridas(componentes, datosExcel) {
+    const columnasFaltantes = [];
+    const formulasDisponibles = JSON.parse(localStorage.getItem('formulasDisponibles') || '[]');
+    
+    // Obtener encabezados disponibles de todas las hojas
+    const encabezadosDisponibles = new Set();
+    
+    // Verificar que datosExcel tenga la estructura correcta
+    if (datosExcel && datosExcel.hojas) {
+        Object.values(datosExcel.hojas).forEach(hoja => {
+            if (Array.isArray(hoja) && hoja.length > 0) {
+                // La primera fila contiene los encabezados
+                if (Array.isArray(hoja[0])) {
+                    hoja[0].forEach(encabezado => {
+                        if (encabezado && typeof encabezado === 'string') {
+                            encabezadosDisponibles.add(encabezado.trim());
+                        }
+                    });
+                }
+            }
+        });
+    }
+
+    console.log('Encabezados disponibles:', Array.from(encabezadosDisponibles));
+
+    for (const componente of componentes) {
+        if (componente.componente === "grafica" && componente.formula) {
+            // Buscar la fórmula en las fórmulas disponibles
+            const formula = formulasDisponibles.find(f => f.Nombre === componente.formula);
+            if (formula) {
+                console.log(`Verificando fórmula: ${componente.formula}`);
+                console.log(`Datos de la fórmula: ${formula.Datos}`);
+                
+                // Extraer columnas requeridas de la fórmula estructurada
+                const columnasRequeridas = extraerColumnasDeFormula(formula.Datos);
+                console.log(`Columnas requeridas: ${columnasRequeridas.join(', ')}`);
+                
+                // Verificar que todas las columnas requeridas estén disponibles
+                for (const columna of columnasRequeridas) {
+                    if (!encabezadosDisponibles.has(columna)) {
+                        columnasFaltantes.push(`${componente.formula}: ${columna}`);
+                        console.log(`Columna faltante: ${columna}`);
+                    }
+                }
+            } else {
+                console.warn(`Fórmula no encontrada: ${componente.formula}`);
+                columnasFaltantes.push(`Fórmula no encontrada: ${componente.formula}`);
+            }
+        }
+    }
+
+    return {
+        valido: columnasFaltantes.length === 0,
+        columnasFaltantes
+    };
+}
+
+/**
+ * Extrae las columnas requeridas de una fórmula estructurada
+ * @param {string} formulaEstructurada - Fórmula en formato estructurado
+ * @returns {Array} Array de nombres de columnas requeridas
+ */
+function extraerColumnasDeFormula(formulaEstructurada) {
+    const columnas = [];
+    
+    if (!formulaEstructurada || typeof formulaEstructurada !== 'string') {
+        console.warn('Fórmula estructurada inválida:', formulaEstructurada);
+        return columnas;
+    }
+    
+    // Usar la misma expresión regular que en aplicarFormula.js
+    const regex = /\[@([^\]]+)\]/g;
+    let match;
+    
+    while ((match = regex.exec(formulaEstructurada)) !== null) {
+        const nombreColumna = match[1].trim(); // Limpiar espacios
+        if (!columnas.includes(nombreColumna)) {
+            columnas.push(nombreColumna);
+        }
     }
+    
+    return columnas;
 }
 
 cargarPlantillaScript();

From ed1ba02668ff11f9d5d00c18a048b926f45631ac Mon Sep 17 00:00:00 2001
From: Diego <a01705506@tec.mx>
Date: Sun, 27 Jul 2025 17:02:48 -0600
Subject: [PATCH 13/18] plantillas funcionando

---
 .../analisis/formulas/crearCuadroFormulas.js  |  2 -
 .../paginas/plantillas/cargarPlantilla.js     | 85 ++++++++-----------
 .../paginas/plantillas/crearPlantilla.js      |  3 +-
 3 files changed, 38 insertions(+), 52 deletions(-)

diff --git a/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearCuadroFormulas.js b/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearCuadroFormulas.js
index 195300f6..fbf869a9 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearCuadroFormulas.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/analisis/formulas/crearCuadroFormulas.js
@@ -146,8 +146,6 @@ async function crearCuadroFormulas(graficaId, formulasDisponibles, datosOriginal
 
         
         const datosFormula = inputRadio.formulaDatos;
-
-        console.log('Datos de la fórmula:', datosFormula, 'Nombre de la fórmula:', nombreFormula);
         
         // Verificar que los datos están completos
         if (!datosFormula || datosFormula.trim() === '') {
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
index cef38620..9cc1fca3 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
@@ -7,6 +7,7 @@ const { modificarTipoGrafica, modificarColor, modificarTitulo } = require(`${rut
 const { ElementoNuevo, Contenedores } = require(`${rutaBase}/src/backend/data/analisisModelos/elementoReporte.js`);
 const { aplicarFormula } = require(`${rutaBase}/src/backend/casosUso/formulas/aplicarFormula.js`);
 const { filtrarDatos } = require(`${rutaBase}/src/backend/casosUso/formulas/filtrarDatos.js`);
+const { procesarDatosUniversal } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/graficas/procesarDatosUniversal.js`);
 const Chart = require(`${rutaBase}/node_modules/chart.js/auto`);
 
 // const { configurarTexto, configurarGrafica } = require(`${rutaBase}/src/framework/utils/scripts/paginas/analisis/botonesAgregar.js`);
@@ -18,7 +19,6 @@ function cargarPlantillaScript(){
     botonCargarPlantilla.addEventListener('click', async () => {
         try {
             const respuesta = await consultarPlantilla(nombrePlantilla.value);
-            console.log('plantilla cargada:', respuesta);
             
             if (!respuesta.ok) {
                 mostrarAlerta('Error', 'Error al cargar la plantilla: ' + respuesta.error, 'error');
@@ -26,7 +26,6 @@ function cargarPlantillaScript(){
             }
             
             const contenido = JSON.parse(respuesta.datos.contenido);
-            console.log('contenido:', contenido);
             const idContenedor = 'contenedorElementos';
             const idContenedorPrevisualizacion = 'contenedor-elementos-previsualizacion';
             
@@ -85,7 +84,6 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
         // Iterar sobre cada componente
         for (const componente of componentes) {
             if (componente.componente == "texto") {
-                console.log('es un texto!')
                 // Crear tarjeta de texto
                 configurarTexto(contenedorId, idContenedorPrevisualizacion);
                 
@@ -119,7 +117,6 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                     }
                     
                     // const vistaPrevia = tarjetaTexto.querySelector('.previsualizacion-texto.preview-titulo');
-                    console.log('vista previa:', previsualizacionTexto);
                     actualizarTexto(previsualizacionTexto, areaEscritura);
                     
                     // Actualizar el contador de caracteres después de cargar el contenido
@@ -133,20 +130,8 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                     }
                 }
 
-                // console.log('texto configurado')
-                // tarjeta = contenedor.querySelector('.tarjeta-texto#1').querySelector('tipo-texto')
-                // console.log('tarjeta:', tarjeta);
-                // Configurar propiedades
-                // console.log('tipo: ', tarjetaTexto.querySelector('.tipo-texto')) //.value = componente.tipo;
-                // console.log(tarjetaTexto.querySelector('.area-escritura')) //.value = componente.contenido;
-                
-                // Configurar alineamiento
-                // const iconoAlign = tarjetaTexto.querySelector('.icono-align');
-                // iconoAlign.classList.remove('align-left', 'align-center', 'align-right');
-                // iconoAlign.classList.add(componente.alineamiento);
                 
             } else if (componente.componente == "grafica") {
-                console.log('es una grafica!')
                 // Crear tarjeta de gráfica
                 configurarGrafica(contenedorId, idContenedorPrevisualizacion);
                 
@@ -183,43 +168,52 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                         modificarTitulo(previsualizacionGrafica, elementos.titulo, tarjetaGrafica);
                     }
 
+                    const tractorSeleccionado = componente.tractor;
+
+                    tarjetaGrafica.dataset.filtroActual = componente.filtro || '';
+                    tarjetaGrafica.dataset.parametroActual = componente.parametro || '';
+                    tarjetaGrafica.dataset.formulaActual = componente.formula || '';
+                    
+
                     if(componente.parametro && !componente.formula) {
 
                     }
-                //     if (componente.formula){
-                //         if(componente.filtro){
-                //             const datosFiltrados = filtrarDatos(componente.filtro, JSON.parse(localStorage.getItem('datosFiltradosExcel')), tractorSeleccionado);
-                //             for(const formula of JSON.parse(localStorage.formulasDisponibles)){
-                //                 if (formula.Nombre == componente.formula)
-                //                 {
-                //                     const resultadoFormula = aplicarFormula(formula.Nombre, formula.Datos, tractorSeleccionado, datosFiltrados.resultados);
-                //                     const canvas = previsualizacionGrafica.querySelector('canvas');
+                    if (componente.formula){
+                        if(componente.filtro){
+                            const filtro = [JSON.parse(localStorage.getItem('formulasDisponibles')).filter(formula => formula.Nombre === componente.filtro)[0]];
+                            
+                            const datosFiltrados = filtrarDatos(filtro, JSON.parse(localStorage.getItem('datosFiltradosExcel')), tractorSeleccionado);
+                            for(const formula of JSON.parse(localStorage.formulasDisponibles)){
+                                if (formula.Nombre == componente.formula)
+                                {
+                                    const resultadoFormula = aplicarFormula(formula.Nombre, formula.Datos, tractorSeleccionado, datosFiltrados.resultados);
+                                    const canvas = previsualizacionGrafica.querySelector('canvas');
         
-                //                     const contexto = canvas.getContext('2d');
-                //                     const graficaExistente = Chart.getChart(contexto);
+                                    const contexto = canvas.getContext('2d');
+                                    const graficaExistente = Chart.getChart(contexto);
         
-                //                     if (graficaExistente && resultadoFormula.resultados) {
-                //                         const resultados = resultadoFormula.resultados;
-                //                         const tipoGrafica = graficaExistente.config.type;
+                                    if (graficaExistente && resultadoFormula.resultados) {
+                                        const resultados = resultadoFormula.resultados;
+                                        const tipoGrafica = graficaExistente.config.type;
             
-                //                         // Usar el procesamiento universal
-                //                         const datosRebuild = procesarDatosUniversal(resultados, tipoGrafica, formula.Nombre);
+                                        // Usar el procesamiento universal
+                                        const datosRebuild = procesarDatosUniversal(resultados, tipoGrafica, formula.Nombre);
             
-                //                         // Actualizar la gráfica
-                //                         graficaExistente.options.plugins.title.text = nombreFormula;
-                //                         graficaExistente.data.labels = datosRebuild.labels;
-                //                         graficaExistente.data.datasets[0].data = datosRebuild.valores;
+                                        // Actualizar la gráfica
+                                        graficaExistente.options.plugins.title.text = formula.Nombre;
+                                        graficaExistente.data.labels = datosRebuild.labels;
+                                        graficaExistente.data.datasets[0].data = datosRebuild.valores;
             
-                //                         // CORRECCIÓN: Actualizar también la etiqueta del dataset
-                //                         graficaExistente.data.datasets[0].label = nombreFormula;
+                                        // CORRECCIÓN: Actualizar también la etiqueta del dataset
+                                        graficaExistente.data.datasets[0].label = formula.Nombre;
             
-                //                         graficaExistente.update();
-                //                     }
-                //             }
-                //         }
+                                        graficaExistente.update();
+                                    }
+                            }
+                        }
                         
-                //     }
-                // }
+                    }
+                }
 
                 }
             }
@@ -263,25 +257,20 @@ function verificarColumnasRequeridas(componentes, datosExcel) {
         });
     }
 
-    console.log('Encabezados disponibles:', Array.from(encabezadosDisponibles));
 
     for (const componente of componentes) {
         if (componente.componente === "grafica" && componente.formula) {
             // Buscar la fórmula en las fórmulas disponibles
             const formula = formulasDisponibles.find(f => f.Nombre === componente.formula);
             if (formula) {
-                console.log(`Verificando fórmula: ${componente.formula}`);
-                console.log(`Datos de la fórmula: ${formula.Datos}`);
                 
                 // Extraer columnas requeridas de la fórmula estructurada
                 const columnasRequeridas = extraerColumnasDeFormula(formula.Datos);
-                console.log(`Columnas requeridas: ${columnasRequeridas.join(', ')}`);
                 
                 // Verificar que todas las columnas requeridas estén disponibles
                 for (const columna of columnasRequeridas) {
                     if (!encabezadosDisponibles.has(columna)) {
                         columnasFaltantes.push(`${componente.formula}: ${columna}`);
-                        console.log(`Columna faltante: ${columna}`);
                     }
                 }
             } else {
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
index 6f21222d..0ad7d709 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
@@ -31,9 +31,8 @@ function obtenerJsonPlantillaDesdeDOM(){
 
     const contenedorComponentes = document.getElementById('contenedorElementos')
 
-    console.log('contenedor componentes:', contenedorComponentes);
     Array.from(contenedorComponentes.children).forEach(componente => {
-        console.log(componente);
+
         if(componente.classList.contains('tarjeta-texto')){
             componentes.push({
                 componente: "texto",

From 17d6b703263812fb921dc7e866de173dbc07a008 Mon Sep 17 00:00:00 2001
From: DanielQueijeiro <dany.queijeiro@hotmail.com>
Date: Sun, 27 Jul 2025 17:05:54 -0600
Subject: [PATCH 14/18] arreglar eslint

---
 .../utils/scripts/paginas/plantillas/cargarPlantilla.js     | 6 +++---
 .../utils/scripts/paginas/plantillas/crearPlantilla.js      | 3 ++-
 .../utils/scripts/paginas/plantillas/eliminarPlantilla.js   | 3 ++-
 .../utils/scripts/paginas/plantillas/jsonPlantilla.js       | 2 +-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
index 9cc1fca3..28c10115 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
@@ -1,3 +1,4 @@
+/*eslint-disable*/
 const { consultarPlantilla } = require(`${rutaBase}src/backend/casosUso/plantillas/consultarPlantilla.js`);
 // const { consultarPlantillas } = require(`${rutaBase}src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js`);
 // const { configurarTexto } = require(`${rutaBase}src/framework/utils/scripts/paginas/analisis/agregarTexto.js`);
@@ -21,7 +22,7 @@ function cargarPlantillaScript(){
             const respuesta = await consultarPlantilla(nombrePlantilla.value);
             
             if (!respuesta.ok) {
-                mostrarAlerta('Error', 'Error al cargar la plantilla: ' + respuesta.error, 'error');
+                mostrarAlerta('Error', `Error al cargar la plantilla: ${respuesta.error}`, 'error');
                 return;
             }
             
@@ -184,8 +185,7 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                             
                             const datosFiltrados = filtrarDatos(filtro, JSON.parse(localStorage.getItem('datosFiltradosExcel')), tractorSeleccionado);
                             for(const formula of JSON.parse(localStorage.formulasDisponibles)){
-                                if (formula.Nombre == componente.formula)
-                                {
+                                if (formula.Nombre == componente.formula) {
                                     const resultadoFormula = aplicarFormula(formula.Nombre, formula.Datos, tractorSeleccionado, datosFiltrados.resultados);
                                     const canvas = previsualizacionGrafica.querySelector('canvas');
         
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
index 0ad7d709..e44317d4 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
@@ -1,3 +1,4 @@
+/*eslint-disable*/
 const { crearPlantilla } = require(`${rutaBase}src/backend/casosUso/plantillas/crearPlantilla.js`);
 // const { consultarPlantillas } = require(`${rutaBase}src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js`);
 // const { mostrarAlerta } = require(`${rutaBase}/src/framework/vistas/includes/componentes/moleculas/alertaSwal/alertaSwal`);
@@ -17,7 +18,7 @@ function crearPlantillaScript(){
             vaciarSelectorPlantillas
             await consultarPlantillasScript(); // Actualizar el selector de plantillas
         } else {
-            mostrarAlerta('Error', 'Error al guardar la plantilla: ' + respuesta.error, 'error');
+            mostrarAlerta('Error', `Error al guardar la plantilla: ${respuesta.error}`, 'error');
         }
     });
 }
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js
index 14741c14..9606f0d7 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/eliminarPlantilla.js
@@ -1,3 +1,4 @@
+/*eslint-disable*/
 const { eliminarPlantilla } = require(`${rutaBase}src/backend/casosUso/plantillas/eliminarPlantilla.js`);
 // const { consultarPlantillas } = require(`${rutaBase}src/framework/utils/scripts/paginas/plantillas/consultarPlantillas.js`);
 
@@ -12,7 +13,7 @@ function eliminarPlantillaScript(){
             vaciarSelectorPlantillas(); 
             await consultarPlantillasScript(); // Actualizar el selector de plantillas
         } else {
-            mostrarAlerta('Error', 'Error al eliminar la plantilla: ' + respuesta.error, 'error');
+            mostrarAlerta('Error', `Error al eliminar la plantilla: ${respuesta.error}`, 'error');
         }
     });
 }
diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/jsonPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/jsonPlantilla.js
index 29097629..55c964b7 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/jsonPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/jsonPlantilla.js
@@ -1,7 +1,7 @@
 
 
 {
-    componentes : [
+    [
         {
             componente : "texto",
             tipo : "titulo",

From 6cd4606260b9b6827604c3a1de1cec0d11af11f6 Mon Sep 17 00:00:00 2001
From: DanielQueijeiro <dany.queijeiro@hotmail.com>
Date: Sun, 27 Jul 2025 17:50:49 -0600
Subject: [PATCH 15/18] formulas

---
 .../scripts/paginas/plantillas/cargarPlantilla.js  | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
index 28c10115..d3c09b0a 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
@@ -66,7 +66,20 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                 .map(item => item.split(': ')[1]) // Extraer solo el nombre de la columna
                 .filter((valor, indice, array) => array.indexOf(valor) === indice) // Eliminar duplicados
                 .join(', ');
+            const verificarFormulaOColumna = verificacionResultado.columnasFaltantes
+                .map(item =>item.split(': ')[0])
+                .filter((valor, indice, array) => array.indexOf(valor) === indice) // Eliminar duplicados
+                .join(', ');
             
+            if (verificarFormulaOColumna.includes('Fórmula no encontrada')) {
+                mostrarAlerta(
+                    `Fórmulas no encontradas: ${columnasFaltantesTexto}`, 
+                    'Asegúrate de que existan las fórmulas de esta plantilla.', 
+                    'error'
+                );
+                return false;
+            }
+
             mostrarAlerta(
                 `Columnas no encontradas: ${columnasFaltantesTexto}`, 
                 'Asegúrate de haber seleccionado todas las columnas necesarias para aplicar las fórmulas de esta plantilla.', 
@@ -274,7 +287,6 @@ function verificarColumnasRequeridas(componentes, datosExcel) {
                     }
                 }
             } else {
-                console.warn(`Fórmula no encontrada: ${componente.formula}`);
                 columnasFaltantes.push(`Fórmula no encontrada: ${componente.formula}`);
             }
         }

From 8d32043288bd990d41538a43e826b44dcc01d38e Mon Sep 17 00:00:00 2001
From: DanielQueijeiro <dany.queijeiro@hotmail.com>
Date: Sun, 27 Jul 2025 17:51:47 -0600
Subject: [PATCH 16/18] mostrar tambien filtros

---
 .../paginas/plantillas/cargarPlantilla.js     | 56 +++++++++++++------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
index d3c09b0a..9c33ad78 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/cargarPlantilla.js
@@ -80,6 +80,16 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
                 return false;
             }
 
+            // Verificar si hay columnas no encontradas (de filtros)
+            if (verificarFormulaOColumna.includes('Columna no encontrada')) {
+                mostrarAlerta(
+                    `Columna no encontrada: ${columnasFaltantesTexto}`, 
+                    'Asegúrate de seleccionar todas las columnas necesarias para aplicar este filtro.', 
+                    'error'
+                );
+                return false;
+            }
+
             mostrarAlerta(
                 `Columnas no encontradas: ${columnasFaltantesTexto}`, 
                 'Asegúrate de haber seleccionado todas las columnas necesarias para aplicar las fórmulas de esta plantilla.', 
@@ -242,7 +252,7 @@ async function cargarPlantillaDesdeJSON(json, contenedorId, idContenedorPrevisua
 }
 
 /**
- * Verifica que todas las columnas requeridas por las fórmulas de la plantilla estén disponibles
+ * Verifica que todas las columnas requeridas por las fórmulas y filtros de la plantilla estén disponibles
  * @param {Array} componentes - Componentes de la plantilla
  * @param {Object} datosExcel - Datos de Excel disponibles
  * @returns {Object} Resultado de la verificación
@@ -270,24 +280,38 @@ function verificarColumnasRequeridas(componentes, datosExcel) {
         });
     }
 
-
     for (const componente of componentes) {
-        if (componente.componente === "grafica" && componente.formula) {
-            // Buscar la fórmula en las fórmulas disponibles
-            const formula = formulasDisponibles.find(f => f.Nombre === componente.formula);
-            if (formula) {
-                
-                // Extraer columnas requeridas de la fórmula estructurada
-                const columnasRequeridas = extraerColumnasDeFormula(formula.Datos);
-                
-                // Verificar que todas las columnas requeridas estén disponibles
-                for (const columna of columnasRequeridas) {
-                    if (!encabezadosDisponibles.has(columna)) {
-                        columnasFaltantes.push(`${componente.formula}: ${columna}`);
+        if (componente.componente === "grafica") {
+            // Verificar fórmula
+            if (componente.formula) {
+                const formula = formulasDisponibles.find(f => f.Nombre === componente.formula);
+                if (formula) {
+                    const columnasRequeridas = extraerColumnasDeFormula(formula.Datos);
+                    
+                    for (const columna of columnasRequeridas) {
+                        if (!encabezadosDisponibles.has(columna)) {
+                            columnasFaltantes.push(`${componente.formula}: ${columna}`);
+                        }
+                    }
+                } else {
+                    columnasFaltantes.push(`Fórmula no encontrada: ${componente.formula}`);
+                }
+            }
+
+            // Verificar filtro
+            if (componente.filtro) {
+                const filtro = formulasDisponibles.find(f => f.Nombre === componente.filtro);
+                if (filtro) {
+                    const columnasRequeridas = extraerColumnasDeFormula(filtro.Datos);
+                    
+                    for (const columna of columnasRequeridas) {
+                        if (!encabezadosDisponibles.has(columna)) {
+                            columnasFaltantes.push(`Columna no encontrada: ${columna}`);
+                        }
                     }
+                } else {
+                    columnasFaltantes.push(`Filtro no encontrado: ${componente.filtro}`);
                 }
-            } else {
-                columnasFaltantes.push(`Fórmula no encontrada: ${componente.formula}`);
             }
         }
     }

From 511d8f9232518bf536f59665a5ca53b18ac05833 Mon Sep 17 00:00:00 2001
From: DanielQueijeiro <dany.queijeiro@hotmail.com>
Date: Sun, 27 Jul 2025 17:54:51 -0600
Subject: [PATCH 17/18] xd

---
 .../utils/scripts/paginas/plantillas/crearPlantilla.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
index e44317d4..ab6a4da7 100644
--- a/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
+++ b/harvester-app/src/framework/utils/scripts/paginas/plantillas/crearPlantilla.js
@@ -18,7 +18,7 @@ function crearPlantillaScript(){
             vaciarSelectorPlantillas
             await consultarPlantillasScript(); // Actualizar el selector de plantillas
         } else {
-            mostrarAlerta('Error', `Error al guardar la plantilla: ${respuesta.error}`, 'error');
+            mostrarAlerta('Error', `Error al guardar la plantilla`, 'error');
         }
     });
 }

From 34770a7199df227041013722340daa2a5d85cc95 Mon Sep 17 00:00:00 2001
From: DanielQueijeiro <dany.queijeiro@hotmail.com>
Date: Sun, 27 Jul 2025 17:55:45 -0600
Subject: [PATCH 18/18] devtools

---
 harvester-app/src/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/harvester-app/src/main.js b/harvester-app/src/main.js
index 6f4bcd66..0749945c 100644
--- a/harvester-app/src/main.js
+++ b/harvester-app/src/main.js
@@ -27,7 +27,7 @@ const createWindow = async () => {
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,
-      devTools: true,
+      //devTools: true,
     },
   });