@imansi/templates-dashboard

4 variantes visuales de dashboard para el ecosistema Imansi. Sidebar, topbar, panel secundario y más — listos para conectar a imansi-auth-react.

---

¿Qué es?

@imansi/templates-dashboard es el paquete de layouts y páginas de dashboard del ecosistema Imansi. Proporciona 4 variantes visuales completas — cada una con su sidebar, header, layout y página de inicio — todas conectadas a imansi-auth-react.

Cada componente:

• Usa useAutenticacion para mostrar al usuario real
• Está construido sobre @imansi/ui y @imansi/tailwind
• Funciona con los 6 temas y 2 modos
• Es 100% responsive con drawers mobile

---

Instalación

npm install @imansi/templates-dashboard @imansi/tailwind @imansi/ui imansi-auth-react react-router-dom

---

Uso básico

import { Routes, Route } from 'react-router-dom';
import { ProtegerRuta } from 'imansi-auth-react';
import { Home } from '@imansi/templates-dashboard/classic';
import {
  LayoutDashboard,
  Users,
  BarChart3,
  User,
  Settings,
  DollarSign,
} from 'lucide-react';

const NAV_SECTIONS = [
  {
    title: 'Principal',
    items: [
      { href: '/dashboard', label: 'Panel', icon: <LayoutDashboard size={16} /> },
      { href: '/dashboard/usuarios', label: 'Usuarios', icon: <Users size={16} />, badge: '24' },
      { href: '/dashboard/analiticas', label: 'Analíticas', icon: <BarChart3 size={16} /> },
    ],
  },
];

const USER_MENU_ITEMS = [
  { label: 'Mi perfil', href: '/dashboard/perfil', icon: <User size={16} /> },
  { label: 'Configuración', href: '/dashboard/configuracion', icon: <Settings size={16} /> },
];

export default function App() {
  return (
    <Routes>
      <Route
        path="/dashboard"
        element={
          <ProtegerRuta>
            <Home
              brandName="Mi Empresa"
              navSections={NAV_SECTIONS}
              userMenuItems={USER_MENU_ITEMS}
              notificationsCount={3}
              title="Panel"
              subtitle="Resumen general de tu actividad."
              stats={[
                { label: 'Ingresos', value: '$12,450', change: '+12.5%', trend: 'up', icon: <DollarSign size={18} /> },
              ]}
              chartData={[
                { label: 'Lun', value: 45 },
                { label: 'Mar', value: 62 },
                { label: 'Mié', value: 38 },
              ]}
            />
          </ProtegerRuta>
        }
      />
    </Routes>
  );
}

---

Variantes

Variante	Descripción	Import
classic	Sidebar fijo de 256px + header	@imansi/templates-dashboard/classic
collapsed	Sidebar flotante de 96px con solo iconos	@imansi/templates-dashboard/collapsed
topbar	Sin sidebar, navegación horizontal	@imansi/templates-dashboard/topbar
dual	Rail 72px + panel secundario 320px	@imansi/templates-dashboard/dual

classic

Panel administrativo tradicional. Ideal para: apps empresariales, dashboards con muchas secciones.

collapsed

Sidebar flotante de 96px con solo iconos y tooltips al hover. Ideal para: apps minimalistas, dashboards con mucho contenido.

topbar

Sin sidebar. La navegación va toda en el header horizontal. Ideal para: apps con pocas secciones.

dual

Rail de 72px + panel secundario de 320px. Ideal para: apps colaborativas (Slack, Linear, Notion, VS Code).

---

Componentes

<Home /> (todas las variantes)

Prop	Tipo	Default	Descripción
brandName	string	'Imansi'	Nombre de la marca
brandLogo	string	auto	URL del logo
navSections	array	[]	Secciones del sidebar
userMenuItems	array	[]	Items del dropdown del user
notificationsCount	number	0	Contador de notificaciones
title	string	'Dashboard'	Título de la página
subtitle	string	'Resumen general'	Subtítulo
stats	array	[]	Cards de estadísticas
chartData	array	[]	Datos del chart
activityItems	array	[]	Actividad reciente
topItems	array	[]	Top productos

<Home /> de dual — props adicionales

Prop	Tipo	Descripción
panelTitle	string	Título del panel secundario
panelItems	array	Items del panel
panelAction	object	Botón "+" del panel
panelSearchPlaceholder	string	Placeholder del buscador
panelShowSearch	boolean	Mostrar buscador

Layouts individuales

Cada variante exporta también sus componentes internos para uso avanzado:

classic y collapsed: DashboardLayout, Sidebar, Header, Home

topbar: Topbar, TopbarLayout, Home

dual: DualLayout, SecondaryPanel, Home, createDemoPanelItems

Ejemplo: usar solo el layout

import { DashboardLayout } from '@imansi/templates-dashboard/classic';

export function UsersPage() {
  return (
    <DashboardLayout
      brandName="Mi Empresa"
      navSections={NAV_SECTIONS}
      userMenuItems={USER_MENU_ITEMS}
      title="Usuarios"
    >
      <h1>Lista de usuarios</h1>
      {/* Tu contenido */}
    </DashboardLayout>
  );
}

---

Personalización

Nav sections

const NAV_SECTIONS = [
  {
    title: 'Principal',
    items: [
      { href: '/dashboard', label: 'Panel', icon: <LayoutDashboard size={16} /> },
      { href: '/dashboard/usuarios', label: 'Usuarios', icon: <Users size={16} />, badge: '24' },
    ],
  },
];

Stats

const STATS = [
  {
    label: 'Ingresos',
    value: '$12,450',
    change: '+12.5%',
    trend: 'up',  // 'up' | 'down' | 'flat'
    icon: <DollarSign size={18} />,
  },
];

Chart data

const CHART_DATA = [
  { label: 'Lun', value: 45 },
  { label: 'Mar', value: 62 },
  { label: 'Mié', value: 38 },
  { label: 'Jue', value: 78 },
  { label: 'Vie', value: 92 },
];

Los valores son porcentuales (0-100). El chart escala automáticamente.

---

Próximos pasos

• imansi-auth-react — Los hooks que usan estos layouts
• @imansi/templates-auth — Las variantes de auth
• @imansi/templates — Todas las plantillas