pablinux/help_desk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): rediseño integral de UI/UX de la aplicación (navbar, sidebar offcanvas, KPIs, tablas y chat de tickets)

Browse Source
This commit is contained in:
pablinux
2026-10-20 21:04:02 -05:00
parent 2f7a2d7568
commit efe95fca54
15 changed files with 2399 additions and 709 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/partials/navbar.ejs
+43 -13
View File
@@ -1,17 +1,47 @@
<nav class="navbar navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center gap-2" href="/">
<img src="/img/logo.svg" alt="Help Desk Logo" width="28" height="28" class="d-inline-block align-text-top rounded-1">
<span>Help Desk</span>
</a>
<nav class="navbar navbar-dark bg-dark sticky-top app-topbar">
<div class="container-fluid px-3">
<div class="d-flex align-items-center gap-2">
<% if (user) { %>
<button class="btn btn-sm btn-icon-glass text-white d-md-none me-1" type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-label="Abrir menú">
<i class="fas fa-bars fs-5"></i>
</button>
<% } %>
<a class="navbar-brand d-flex align-items-center gap-2 m-0" href="/">
<div class="brand-logo-glow">
<img src="/img/logo.svg" alt="Help Desk Logo" width="28" height="28" class="d-inline-block align-text-top rounded-1">
</div>
<div class="d-flex flex-column">
<span class="brand-text">Help Desk <span class="brand-subtext d-none d-sm-inline">& FSM</span></span>
</div>
</a>
<% if (typeof company !== 'undefined' && company) { %>
<div class="company-nav-pill ms-2 d-none d-lg-flex align-items-center gap-1.5">
<i class="fas fa-building text-info" style="font-size: 0.75rem;"></i>
<span class="company-name-text"><%= company.name %></span>
<span class="badge company-plan-badge"><%= company.plan %></span>
</div>
<% } %>
</div>
<% if (user) { %>
<div class="d-flex align-items-center">
<span class="text-light me-3">
<i class="fas fa-user"></i> <%= user.nombre %>
<span class="badge bg-info ms-1"><%= user.rol %></span>
</span>
<a href="/logout" class="btn btn-outline-light btn-sm">
<i class="fas fa-sign-out-alt"></i> Salir
<div class="d-flex align-items-center gap-2 gap-sm-3">
<div class="user-profile-badge d-flex align-items-center gap-2">
<% if (user.avatar_url) { %>
<img src="<%= user.avatar_url %>" alt="<%= user.nombre %>" class="user-avatar-img">
<% } else { %>
<div class="user-avatar-initials">
<%= (user.nombre || 'U').charAt(0).toUpperCase() %>
</div>
<% } %>
<div class="d-none d-sm-flex flex-column text-start">
<span class="user-nav-name"><%= user.nombre %></span>
<span class="user-nav-role badge-role-<%= user.rol %>"><%= user.rol %></span>
</div>
</div>
<a href="/logout" class="btn btn-logout-glass btn-sm d-flex align-items-center gap-1.5" title="Cerrar Sesión">
<i class="fas fa-sign-out-alt"></i>
<span class="d-none d-md-inline">Salir</span>
</a>
</div>
<% } %>