consultoria-as/FRASA-CAS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mejoras): 14 mejoras al CRM Frasa

Browse Source 
Fase 1 - UI: dark mode, skeletons, toasts
Fase 2 - Filtros: avanzados Mi día, búsqueda global Ctrl+K
Fase 3 - Datos: export Excel, notas apartados, auditoría
Fase 4 - Dashboard: gráficas vendedor + métricas uso
Fase 5 - Responsive: tablets optimizadas
Fase 6 - PWA: IndexedDB offline, push notifications

Backend: 3 tablas nuevas, 6 services, 6 endpoints nuevos
721 API tests + fronts verdes.
This commit is contained in:
Consult AS Technology
2026-09-07 06:04:49 +00:00
parent 388e1da338
commit c77b4c0628
170 changed files with 5802 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
apps/landing/src/components/Navbar.tsx
View File

@@ -1,5 +1,7 @@
import { useEffect, useState } from 'react'
import { getSesion, type UsuarioSesion } from '../services/auth'
import DarkModeToggle from './DarkModeToggle'
import { CommandPalette } from './CommandPalette'
interface Props {
usuario?: UsuarioSesion | null
@@ -9,6 +11,7 @@ interface Props {
/** Barra superior: marca a la izquierda, estado de sesión y acceso a configuración a la derecha */
export function Navbar({ usuario, onConfiguraciones }: Props) {
const [conSesion, setConSesion] = useState(() => getSesion() !== null)
const [menuAbierto, setMenuAbierto] = useState(false)
useEffect(() => {
const actualizar = () => setConSesion(getSesion() !== null)
@@ -23,15 +26,19 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
const esAdmin = usuario?.rol === 'admin'
return (
<header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur">
<div className="mx-auto flex h-14 max-w-[1280px] items-center justify-between px-6">
<span className="text-base font-semibold tracking-tight text-[#111827]">
<header className="sticky top-0 z-10 border-b border-[#E5E7EB] bg-white/95 backdrop-blur dark:border-[#1E293B] dark:bg-[#1E293B]/95">
<div className="mx-auto flex h-14 max-w-[1280px] items-center justify-between px-4 sm:px-6">
<span className="text-base font-semibold tracking-tight text-[#111827] dark:text-[#E2E8F0]">
FRASA<span className="text-accent">.</span>
</span>
<div className="flex items-center gap-4">
{/* Desktop nav */}
<div className="hidden items-center gap-4 md:flex">
<CommandPalette />
<DarkModeToggle />
<span
className={`hidden items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium sm:inline-flex ${
conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B]'
conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B] dark:text-[#94A3B8]'
}`}
>
<span
@@ -45,7 +52,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
type="button"
onClick={onConfiguraciones}
title="Configuraciones"
className="flex h-8 w-8 items-center justify-center rounded-lg text-[#64748B] transition-colors hover:bg-[#F1F5F9] hover:text-accent"
className="flex h-8 w-8 items-center justify-center rounded-lg text-[#64748B] dark:text-[#94A3B8] transition-colors hover:bg-[#F1F5F9] hover:text-accent"
aria-label="Abrir configuraciones"
>
⚙
@@ -53,12 +60,70 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
)}
<a
href="#configuracion"
className="text-sm font-medium text-[#64748B] transition-colors hover:text-accent"
className="text-sm font-medium text-[#64748B] dark:text-[#94A3B8] transition-colors hover:text-accent"
>
Configuración
</a>
</div>
{/* Mobile hamburger */}
<button
type="button"
onClick={() => setMenuAbierto((v) => !v)}
className="flex h-8 w-8 items-center justify-center rounded-lg text-[#4B5563] dark:text-[#CBD5E1] transition-colors hover:bg-[#F1F5F9] md:hidden"
aria-label={menuAbierto ? 'Cerrar menú' : 'Abrir menú'}
aria-expanded={menuAbierto}
>
{menuAbierto ? (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="h-5 w-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
) : (
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="h-5 w-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
)}
</button>
</div>
{/* Mobile menu panel */}
{menuAbierto && (
<div className="border-t border-[#E5E7EB] bg-white px-4 py-4 dark:border-[#1E293B] dark:bg-[#1E293B] md:hidden">
<div className="flex flex-col gap-3">
<div className="flex items-center gap-3">
<CommandPalette />
<DarkModeToggle />
</div>
<span
className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium w-fit ${
conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B] dark:text-[#94A3B8]'
}`}
>
<span
aria-hidden="true"
className={`h-1.5 w-1.5 rounded-full ${conSesion ? 'bg-green-500' : 'bg-[#94A3B8]'}`}
/>
{conSesion ? 'Sesión activa' : 'Sin sesión'}
</span>
{esAdmin && onConfiguraciones && (
<button
type="button"
onClick={() => { onConfiguraciones(); setMenuAbierto(false) }}
className="flex items-center gap-2 text-sm font-medium text-[#4B5563] dark:text-[#CBD5E1]"
>
⚙ Configuraciones
</button>
)}
<a
href="#configuracion"
className="text-sm font-medium text-[#64748B] dark:text-[#94A3B8] transition-colors hover:text-accent"
onClick={() => setMenuAbierto(false)}
>
Configuración
</a>
</div>
</div>
)}
</header>
)
}