javier.2526/doli-front
javier.2526
/
doli-front
mirror of https://github.com/JavMB/doli-front.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Olivia Mestre Llobell 2026-01-23 18:30:37 +01:00
parent 3c901a35a6
commit 41741aaac9
4 changed files with 108 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/Dashboard-main.js Normal file
View File

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

2
src/components/Login.js
View File

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

9
src/counter.js
View File

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

50
src/pages/DashboardPage.js
View File

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