Refactor dashboard rendering; create separate Dashboard-main component and enhance layout with metrics and graphs

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;
+}

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">

src/counter.js

@@ -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)
-}

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', () => {