From 41741aaac93dbbfc5408862a8bea4effd6b14789 Mon Sep 17 00:00:00 2001
From: Olivia Mestre Llobell <59211313+BYolivia@users.noreply.github.com>
Date: Fri, 23 Jan 2026 18:30:37 +0100
Subject: [PATCH] Refactor dashboard rendering; create separate Dashboard-main
 component and enhance layout with metrics and graphs

---
 src/components/Dashboard-main.js | 60 ++++++++++++++++++++++++++++++++
 src/components/Login.js          |  2 +-
 src/counter.js                   |  9 -----
 src/pages/DashboardPage.js       | 54 ++++++++++++++++++++++++----
 4 files changed, 108 insertions(+), 17 deletions(-)
 create mode 100644 src/components/Dashboard-main.js
 delete mode 100644 src/counter.js

diff --git a/src/components/Dashboard-main.js b/src/components/Dashboard-main.js
new file mode 100644
index 0000000..6721999
--- /dev/null
+++ b/src/components/Dashboard-main.js
@@ -0,0 +1,60 @@
+export function renderDashboard() {
+  const user = auth.getUser();
+  const container = document.createElement('div');
+  container.className = 'dashboard';
+
+  dashboardContainer.innerHTML = /*html*/ `
+  <div class="dashboard-header">
+      <h1>Bienvenido, ${user?.email || 'Usuario'}</h1>
+      <button id="logout-button" class="logout-button">Cerrar Sesión</button>
+    </div>
+    <div class="dashboard-content">
+      
+        <div class="metricas">
+          <div class="total-facturado">
+            <p>Total Facturado</p>
+
+            <!-- numero total facturado va aquí -->
+            <p>Este mes</p>
+          </div>
+
+          <div class="facturas-emitidas">
+            <p>Facturas Emitidas</p>
+            <!-- numero facturas emitidas va aquí -->
+            <p>Este mes</p>
+          </div>
+          
+          <div class="clientes-activos">
+            <p>Clientes Activos</p>
+            <!-- numero clientes activos va aquí -->
+            <p>Con factura este mes</p>
+          </div>
+          
+          <div class="pendiente-de-cobro">
+            <p>Pendiente de Cobro</p>
+            <!-- numero pendiente de cobro va aquí -->
+            <p>Facturas vencidas</p>
+          </div>
+        
+        </div>
+
+        <div class="graficos">
+      
+          <div class="grafico-mensual">
+          <p>Gráfico de Facturación Mensual</p>
+          </div>
+
+          <div class="estado-facturas">
+            <p>Estado de las Facturas</p>
+        </div>
+
+    </div>
+  `;
+
+  container.querySelector('#logout-button').addEventListener('click', () => {
+    auth.logout();
+    window.location.hash = '#login';
+  });
+
+  return container;
+}
\ No newline at end of file
diff --git a/src/components/Login.js b/src/components/Login.js
index 51222c0..9615702 100644
--- a/src/components/Login.js
+++ b/src/components/Login.js
@@ -2,7 +2,7 @@ export function renderLogin(onLogin) {
   const loginContainer = document.createElement('div');
   loginContainer.className = 'login-container';
 
-  loginContainer.innerHTML = `
+  loginContainer.innerHTML = /*html*/ `
     <div class="login-card">
       <h2 class="login-title">Iniciar Sesión</h2>
       <form id="login-form">
diff --git a/src/counter.js b/src/counter.js
deleted file mode 100644
index 881e2d7..0000000
--- a/src/counter.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export function setupCounter(element) {
-  let counter = 0
-  const setCounter = (count) => {
-    counter = count
-    element.innerHTML = `count is ${counter}`
-  }
-  element.addEventListener('click', () => setCounter(counter + 1))
-  setCounter(0)
-}
diff --git a/src/pages/DashboardPage.js b/src/pages/DashboardPage.js
index eca570f..8bd9f3f 100644
--- a/src/pages/DashboardPage.js
+++ b/src/pages/DashboardPage.js
@@ -1,18 +1,58 @@
 import { auth } from '../services/auth.js';
+import { renderDashboard } from '../components/Dashboard.js';
 
-export function renderDashboard() {
-  const user = auth.getUser();
-  const container = document.createElement('div');
-  container.className = 'dashboard';
 
+
+const dashboardComponent = renderDashboard(async () => {
+  if (auth.checkAuth()) {
+    container.appendChild(dashboardComponent);
+  /*
   container.innerHTML = /*html*/`
     <div class="dashboard-header">
       <h1>Bienvenido, ${user?.email || 'Usuario'}</h1>
       <button id="logout-button" class="logout-button">Cerrar Sesión</button>
     </div>
     <div class="dashboard-content">
-      <p>Dashboard protegido</p>
-    </div>
+      
+        <div class="metricas">
+          <div class="total-facturado">
+            <p>Total Facturado</p>
+
+            <!-- numero total facturado va aquí -->
+            <p>Este mes</p>
+          </div>
+
+          <div class="facturas-emitidas">
+            <p>Facturas Emitidas</p>
+            <!-- numero facturas emitidas va aquí -->
+            <p>Este mes</p>
+          </div>
+          
+          <div class="clientes-activos">
+            <p>Clientes Activos</p>
+            <!-- numero clientes activos va aquí -->
+            <p>Con factura este mes</p>
+          </div>
+          
+          <div class="pendiente-de-cobro">
+            <p>Pendiente de Cobro</p>
+            <!-- numero pendiente de cobro va aquí -->
+            <p>Facturas vencidas</p>
+          </div>
+        
+        </div>
+
+        <div class="graficos">
+      
+          <div class="grafico-mensual">
+          <p>Gráfico de Facturación Mensual</p>
+          </div>
+
+          <div class="estado-facturas">
+            <p>Estado de las Facturas</p>
+        </div>
+
+    </div>*/
   `;
 
   container.querySelector('#logout-button').addEventListener('click', () => {
@@ -21,4 +61,4 @@ export function renderDashboard() {
   });
 
   return container;
-}
+}
\ No newline at end of file