feat: responsive sidebar, client selector and layout with alert/device counts

2026-02-12 15:26:01 -06:00
parent 5d698490e2
commit 20982aa077
5 changed files with 386 additions and 158 deletions
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -1,37 +1,132 @@
 'use client'

-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
 import Sidebar from '@/components/layout/Sidebar'
 import Header from '@/components/layout/Header'
+import { SelectedClientProvider, useSelectedClient } from '@/components/providers/SelectedClientProvider'
+import { trpc } from '@/lib/trpc-client'

 export default function DashboardLayout({
  children,
 }: {
  children: React.ReactNode
 }) {
-  const [alertasActivas, setAlertasActivas] = useState(0)
-  const [user, setUser] = useState({
-    nombre: 'Admin',
-    email: 'admin@example.com',
-    rol: 'SUPER_ADMIN',
+  const router = useRouter()
+
+  const meQuery = trpc.auth.me.useQuery(undefined, {
+    retry: false,
+    staleTime: 60 * 1000,
+  })
+  const logoutMutation = trpc.auth.logout.useMutation({
+    onSuccess: () => {
+      window.location.href = '/login'
+    },
  })

  useEffect(() => {
-    // TODO: Cargar alertas activas desde API
-    // TODO: Cargar usuario desde sesion
-  }, [])
+    if (meQuery.isError) {
+      router.push('/login')
+    }
+  }, [meQuery.isError, router])

-  const handleLogout = async () => {
-    // TODO: Implementar logout
-    window.location.href = '/login'
+  const handleLogout = () => {
+    logoutMutation.mutate()
  }

+  if (meQuery.isLoading || meQuery.isError) {
+    return (
+      <div className="flex h-screen bg-dark-500 items-center justify-center">
+        <div className="text-gray-400">Cargando...</div>
+      </div>
+    )
+  }
+
+  const user = meQuery.data
+  if (!user) return null
+
+  return (
+    <DashboardContent user={user} onLogout={handleLogout}>
+      {children}
+    </DashboardContent>
+  )
+}
+
+function DashboardContent({
+  user,
+  onLogout,
+  children,
+}: {
+  user: { nombre: string; email: string; rol: string }
+  onLogout: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <SelectedClientProvider>
+      <DashboardContentInner user={user} onLogout={onLogout}>
+        {children}
+      </DashboardContentInner>
+    </SelectedClientProvider>
+  )
+}
+
+function DashboardContentInner({
+  user,
+  onLogout,
+  children,
+}: {
+  user: { nombre: string; email: string; rol: string }
+  onLogout: () => void
+  children: React.ReactNode
+}) {
+  const { selectedClientId } = useSelectedClient()
+  const clienteId = selectedClientId ?? undefined
+
+  const activeAlertsCountQuery = trpc.alertas.conteoActivas.useQuery(
+    { clienteId },
+    { refetchOnWindowFocus: true, staleTime: 30 * 1000 }
+  )
+  const activeAlertsCount = activeAlertsCountQuery.data?.total ?? 0
+
+  const devicesCountQuery = trpc.equipos.list.useQuery(
+    { clienteId, page: 1, limit: 1 },
+    { refetchOnWindowFocus: true, staleTime: 30 * 1000 }
+  )
+  const devicesCount = devicesCountQuery.data?.pagination?.total ?? 0
+
+  const clientsQuery = trpc.clientes.list.useQuery(
+    { limit: 100 },
+    { staleTime: 60 * 1000 }
+  )
+  const clients = (clientsQuery.data?.clientes ?? []).map((c) => ({
+    id: c.id,
+    nombre: c.nombre,
+    codigo: c.codigo,
+  }))
+
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
  return (
    <div className="flex h-screen bg-dark-500">
-      <Sidebar alertasActivas={alertasActivas} />
-      <div className="flex-1 flex flex-col overflow-hidden">
-        <Header user={user} onLogout={handleLogout} />
-        <main className="flex-1 overflow-y-auto p-6">
+      <Sidebar
+        activeAlertsCount={activeAlertsCount}
+        devicesCount={devicesCount}
+        open={sidebarOpen}
+        onClose={() => setSidebarOpen(false)}
+      />
+      <div className="ml-0 md:ml-[260px] flex min-w-0 flex-1 flex-col overflow-hidden transition-[margin] duration-200">
+        <Header
+          user={{
+            nombre: user.nombre,
+            email: user.email,
+            rol: user.rol,
+          }}
+          onLogout={onLogout}
+          clients={clients}
+          showAllClientsOption={user.rol === 'SUPER_ADMIN'}
+          onOpenSidebar={() => setSidebarOpen(true)}
+        />
+        <main className="flex-1 overflow-y-auto p-4 sm:p-6">
          {children}
        </main>
      </div>
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,9 +1,12 @@
 'use client'

 import { useState } from 'react'
-import { Bell, Search, User, LogOut, Settings, ChevronDown } from 'lucide-react'
+import { Bell, Search, User, LogOut, Settings, ChevronDown, Menu } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import ClientSelector from './ClientSelector'
+import { useSelectedClient } from '@/components/providers/SelectedClientProvider'
+
+export type HeaderClient = { id: string; nombre: string; codigo: string }

 interface HeaderProps {
  user?: {
@@ -13,17 +16,36 @@ interface HeaderProps {
    rol: string
  }
  onLogout?: () => void
+  clients?: HeaderClient[]
+  showAllClientsOption?: boolean
+  onOpenSidebar?: () => void
 }

-export default function Header({ user, onLogout }: HeaderProps) {
+export default function Header({
+  user,
+  onLogout,
+  clients = [],
+  showAllClientsOption = false,
+  onOpenSidebar,
+}: HeaderProps) {
  const [showUserMenu, setShowUserMenu] = useState(false)
  const [showNotifications, setShowNotifications] = useState(false)
+  const { selectedClientId, setSelectedClientId } = useSelectedClient()

  return (
-    <header className="h-16 bg-dark-400 border-b border-dark-100 flex items-center justify-between px-6">
-      {/* Search */}
-      <div className="flex items-center gap-4 flex-1">
-        <div className="relative w-96">
+    <header className="h-16 bg-dark-400 border-b border-dark-100 flex items-center justify-between gap-2 px-4 sm:px-6">
+      <div className="flex items-center gap-2 sm:gap-4 flex-1 min-w-0">
+        {onOpenSidebar != null && (
+          <button
+            type="button"
+            onClick={onOpenSidebar}
+            aria-label="Abrir menú"
+            className="md:hidden shrink-0 p-2 rounded-lg hover:bg-dark-100 text-gray-400 hover:text-white transition-colors"
+          >
+            <Menu className="w-6 h-6" />
+          </button>
+        )}
+        <div className="relative w-full max-w-xs sm:max-w-none sm:w-96">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500" />
          <input
            type="text"
@@ -31,9 +53,13 @@ export default function Header({ user, onLogout }: HeaderProps) {
            className="input pl-10 bg-dark-300"
          />
        </div>
-
        {/* Client Selector */}
-        <ClientSelector />
+        <ClientSelector
+          clients={clients}
+          selectedId={selectedClientId}
+          onChange={setSelectedClientId}
+          showAll={showAllClientsOption}
+        />
      </div>

      {/* Right section */}
@@ -79,7 +105,7 @@ export default function Header({ user, onLogout }: HeaderProps) {
                  />
                </div>
                <div className="px-4 py-3 border-t border-dark-100">
-                  <a href="/alertas" className="text-primary-500 text-sm hover:underline">
+                  <a href="/alerts" className="text-primary-500 text-sm hover:underline">
                    Ver todas las alertas
                  </a>
                </div>
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,88 +1,112 @@
 'use client'

-import { useState } from 'react'
-import Link from 'next/link'
 import { usePathname } from 'next/navigation'
+import Link from 'next/link'
 import {
  LayoutDashboard,
  Monitor,
-  Smartphone,
+  Video,
+  Terminal,
+  FolderOpen,
+  Gauge,
+  Package,
  Network,
+  Smartphone,
  AlertTriangle,
  FileText,
  Settings,
-  Users,
-  Building2,
-  ChevronLeft,
-  ChevronRight,
  Activity,
+  X,
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import SidebarItem, { type BadgeType } from './SidebarItem'
+import SidebarSection from './SidebarSection'

-interface NavItem {
+export interface SidebarMenuItem {
  label: string
  href: string
  icon: React.ReactNode
-  badge?: number
+  badge?: { type: BadgeType; value: string | number }
 }

-const navItems: NavItem[] = [
-  {
-    label: 'Dashboard',
-    href: '/',
-    icon: <LayoutDashboard className="w-5 h-5" />,
-  },
-  {
-    label: 'Equipos',
-    href: '/equipos',
-    icon: <Monitor className="w-5 h-5" />,
-  },
-  {
-    label: 'Celulares',
-    href: '/celulares',
-    icon: <Smartphone className="w-5 h-5" />,
-  },
-  {
-    label: 'Red',
-    href: '/red',
-    icon: <Network className="w-5 h-5" />,
-  },
-  {
-    label: 'Alertas',
-    href: '/alertas',
-    icon: <AlertTriangle className="w-5 h-5" />,
-  },
-  {
-    label: 'Reportes',
-    href: '/reportes',
-    icon: <FileText className="w-5 h-5" />,
-  },
-]
+export interface SidebarMenuSection {
+  label: string
+  items: SidebarMenuItem[]
+}

-const adminItems: NavItem[] = [
+const menuConfig: SidebarMenuSection[] = [
  {
-    label: 'Clientes',
-    href: '/clientes',
-    icon: <Building2 className="w-5 h-5" />,
+    label: 'PRINCIPAL',
+    items: [
+      { label: 'Dashboard', href: '/', icon: <LayoutDashboard className="w-5 h-5" /> },
+      {
+        label: 'Dispositivos',
+        href: '/devices',
+        icon: <Monitor className="w-5 h-5" />,
+        badge: { type: 'red', value: 10 },
+      },
+      {
+        label: 'Sesiones',
+        href: '/sesiones',
+        icon: <Video className="w-5 h-5" />,
+        badge: { type: 'red', value: 4 },
+      },
+    ],
  },
  {
-    label: 'Usuarios',
-    href: '/usuarios',
-    icon: <Users className="w-5 h-5" />,
+    label: 'HERRAMIENTAS',
+    items: [
+      { label: 'Terminal', href: '/terminal', icon: <Terminal className="w-5 h-5" /> },
+      { label: 'Archivos', href: '/archivos', icon: <FolderOpen className="w-5 h-5" /> },
+      { label: 'Rendimiento', href: '/rendimiento', icon: <Gauge className="w-5 h-5" /> },
+      { label: 'Software', href: '/software', icon: <Package className="w-5 h-5" /> },
+    ],
  },
  {
-    label: 'Configuracion',
-    href: '/configuracion',
-    icon: <Settings className="w-5 h-5" />,
+    label: 'INTEGRACIONES',
+    items: [
+      {
+        label: 'LibreNMS',
+        href: '/configuracion',
+        icon: <Network className="w-5 h-5" />,
+        badge: { type: 'green', value: 'OK' },
+      },
+      {
+        label: 'Headwind MDM',
+        href: '/configuracion',
+        icon: <Smartphone className="w-5 h-5" />,
+        badge: { type: 'blue', value: 12 },
+      },
+    ],
+  },
+  {
+    label: 'MONITOREO',
+    items: [
+      {
+        label: 'Alertas',
+        href: '/alerts',
+        icon: <AlertTriangle className="w-5 h-5" />,
+        badge: { type: 'red', value: 5 },
+      },
+      { label: 'Reportes', href: '/reportes', icon: <FileText className="w-5 h-5" /> },
+    ],
+  },
+  {
+    label: 'SISTEMA',
+    items: [
+      { label: 'Configuracion', href: '/configuracion', icon: <Settings className="w-5 h-5" /> },
+    ],
  },
 ]

 interface SidebarProps {
-  alertasActivas?: number
+  activeAlertsCount?: number
+  devicesCount?: number
+  open?: boolean
+  onClose?: () => void
 }

-export default function Sidebar({ alertasActivas = 0 }: SidebarProps) {
-  const [collapsed, setCollapsed] = useState(false)
+export default function Sidebar({ activeAlertsCount, devicesCount, open = false, onClose }: SidebarProps) {
  const pathname = usePathname()

  const isActive = (href: string) => {
@@ -90,93 +114,83 @@ export default function Sidebar({ alertasActivas = 0 }: SidebarProps) {
    return pathname.startsWith(href)
  }

-  const items = navItems.map((item) => ({
-    ...item,
-    badge: item.href === '/alertas' ? alertasActivas : undefined,
-  }))
+  const getBadgeValue = (item: SidebarMenuItem): SidebarMenuItem['badge'] => {
+    if (item.href === '/alerts' && activeAlertsCount !== undefined) {
+      if (activeAlertsCount === 0) return undefined
+      return { type: 'red', value: activeAlertsCount }
+    }
+    if (item.href === '/devices' && devicesCount !== undefined) {
+      return { type: 'red', value: devicesCount }
+    }
+    return item.badge
+  }

  return (
-    <aside
-      className={cn(
-        'h-screen bg-dark-400 border-r border-dark-100 flex flex-col transition-all duration-300',
-        collapsed ? 'w-16' : 'w-64'
-      )}
-    >
-      {/* Logo */}
-      <div className="h-16 flex items-center justify-between px-4 border-b border-dark-100">
-        {!collapsed && (
-          <Link href="/" className="flex items-center gap-2">
-            <Activity className="w-8 h-8 text-primary-500" />
-            <span className="font-bold text-lg gradient-text">MSP Monitor</span>
-          </Link>
+    <>
+      {/* Mobile overlay */}
+      <div
+        role="button"
+        tabIndex={0}
+        aria-label="Cerrar menú"
+        onClick={onClose}
+        onKeyDown={(e) => e.key === 'Escape' && onClose?.()}
+        className={cn(
+          'fixed inset-0 z-30 bg-black/60 transition-opacity duration-200 md:hidden',
+          open ? 'opacity-100' : 'pointer-events-none opacity-0'
        )}
-        <button
-          onClick={() => setCollapsed(!collapsed)}
-          className="p-1.5 rounded-lg hover:bg-dark-100 text-gray-400 hover:text-white transition-colors"
-        >
-          {collapsed ? <ChevronRight className="w-5 h-5" /> : <ChevronLeft className="w-5 h-5" />}
-        </button>
-      </div>
+      />

-      {/* Navigation */}
-      <nav className="flex-1 px-2 py-4 space-y-1 overflow-y-auto">
-        {items.map((item) => (
+      <aside
+        className={cn(
+          'fixed left-0 top-0 z-40 h-screen w-[260px] flex flex-col overflow-hidden',
+          'bg-gradient-to-b from-[#0f172a] to-[#111827]',
+          'border-r border-slate-800/80',
+          'transition-transform duration-200 ease-out',
+          'md:translate-x-0',
+          open ? 'translate-x-0' : '-translate-x-full'
+        )}
+      >
+        <div className="flex h-16 shrink-0 items-center justify-between gap-2 border-b border-slate-800/80 px-4">
          <Link
-            key={item.href}
-            href={item.href}
-            className={cn(
-              'sidebar-link',
-              isActive(item.href) && 'active',
-              collapsed && 'justify-center px-2'
-            )}
-            title={collapsed ? item.label : undefined}
+            href="/"
+            onClick={onClose}
+            className="flex items-center gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-slate-700/30"
          >
-            {item.icon}
-            {!collapsed && (
-              <>
-                <span className="flex-1">{item.label}</span>
-                {item.badge !== undefined && item.badge > 0 && (
-                  <span className="badge badge-danger">{item.badge}</span>
-                )}
-              </>
-            )}
-            {collapsed && item.badge !== undefined && item.badge > 0 && (
-              <span className="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-xs flex items-center justify-center">
-                {item.badge > 9 ? '9+' : item.badge}
-              </span>
-            )}
+            <Activity className="h-8 w-8 text-cyan-400" />
+            <span className="text-lg font-semibold text-white">MSP Monitor</span>
          </Link>
-        ))}
-
-        {/* Separador */}
-        <div className="h-px bg-dark-100 my-4" />
-
-        {/* Admin items */}
-        {adminItems.map((item) => (
-          <Link
-            key={item.href}
-            href={item.href}
-            className={cn(
-              'sidebar-link',
-              isActive(item.href) && 'active',
-              collapsed && 'justify-center px-2'
-            )}
-            title={collapsed ? item.label : undefined}
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Cerrar menú"
+            className="md:hidden p-2 rounded-lg text-slate-400 hover:bg-slate-700/30 hover:text-white transition-colors"
          >
-            {item.icon}
-            {!collapsed && <span className="flex-1">{item.label}</span>}
-          </Link>
-        ))}
-      </nav>
-
-      {/* Footer */}
-      {!collapsed && (
-        <div className="p-4 border-t border-dark-100">
-          <div className="text-xs text-gray-500 text-center">
-            MSP Monitor v1.0.0
-          </div>
+            <X className="w-6 h-6" />
+          </button>
        </div>
-      )}
-    </aside>
+
+        <nav className="flex-1 overflow-y-auto px-3 py-4">
+          {menuConfig.map((section) => (
+            <SidebarSection key={section.label} label={section.label}>
+              {section.items.map((item) => (
+                <SidebarItem
+                  key={item.href + item.label}
+                  label={item.label}
+                  href={item.href}
+                  icon={item.icon}
+                  active={isActive(item.href)}
+                  badge={getBadgeValue(item)}
+                  onClick={onClose}
+                />
+              ))}
+            </SidebarSection>
+          ))}
+        </nav>
+
+        <div className="border-t border-slate-800/80 px-4 py-3 shrink-0">
+          <p className="text-center text-xs text-slate-500">MSP Monitor v1.0.0</p>
+        </div>
+      </aside>
+    </>
  )
 }
--- a/src/components/layout/SidebarItem.tsx
+++ b/src/components/layout/SidebarItem.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import Link from 'next/link'
+import { cn } from '@/lib/utils'
+
+export type BadgeType = 'red' | 'blue' | 'green'
+
+export interface SidebarItemProps {
+  label: string
+  href: string
+  icon: React.ReactNode
+  active?: boolean
+  badge?: {
+    type: BadgeType
+    value: string | number
+  }
+  onClick?: () => void
+}
+
+const badgeStyles: Record<BadgeType, string> = {
+  red: 'bg-red-500/90 text-white',
+  blue: 'bg-blue-500/90 text-white',
+  green: 'bg-emerald-500/90 text-white',
+}
+
+export default function SidebarItem({
+  label,
+  href,
+  icon,
+  active,
+  badge,
+  onClick,
+}: SidebarItemProps) {
+  const isPill = badge?.type === 'green' && typeof badge.value === 'string'
+
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      className={cn(
+        'flex items-center gap-3 rounded-lg px-4 py-2.5 transition-all duration-200',
+        active
+          ? 'bg-gradient-to-r from-cyan-600/30 to-blue-600/20 text-white shadow-[0_0_20px_-5px_rgba(6,182,212,0.25)]'
+          : 'text-slate-400 hover:bg-slate-700/50 hover:text-slate-200'
+      )}
+    >
+      <span
+        className={cn(
+          'flex shrink-0',
+          active ? 'text-cyan-300' : 'text-slate-500'
+        )}
+      >
+        {icon}
+      </span>
+      <span className="min-w-0 flex-1 truncate">{label}</span>
+      {badge != null && (
+        <span
+          className={cn(
+            'flex shrink-0 items-center justify-center text-xs font-bold',
+            isPill ? 'rounded-full px-2 py-0.5' : 'h-5 min-w-[1.25rem] rounded-full px-1.5',
+            badgeStyles[badge.type]
+          )}
+        >
+          {badge.value}
+        </span>
+      )}
+    </Link>
+  )
+}
--- a/src/components/layout/SidebarSection.tsx
+++ b/src/components/layout/SidebarSection.tsx
@@ -0,0 +1,24 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+interface SidebarSectionProps {
+  label: string
+  children: React.ReactNode
+  className?: string
+}
+
+export default function SidebarSection({
+  label,
+  children,
+  className,
+}: SidebarSectionProps) {
+  return (
+    <div className={cn('mt-6 first:mt-4', className)}>
+      <p className="mb-2 px-4 text-xs font-medium uppercase tracking-wider text-slate-500">
+        {label}
+      </p>
+      <div className="space-y-0.5">{children}</div>
+    </div>
+  )
+}