{
  "name": "dashboard",
  "title": {
    "es": "Estructura de dashboard",
    "en": "Dashboard layout"
  },
  "summary": {
    "es": "Barra lateral de navegación y contenido con métricas y un gráfico.",
    "en": "Side navigation and content with metrics and a chart."
  },
  "category": "dashboard",
  "status": "stable",
  "nivel": "componentes",
  "updated": "2026-09-30",
  "license": "MIT",
  "page": "https://componentes-lovat.vercel.app/c/dashboard/",
  "requires": [
    "stat-card",
    "chart",
    "button"
  ],
  "files": [
    {
      "type": "html",
      "url": "https://componentes-lovat.vercel.app/raw/dashboard/dashboard.html",
      "content": "<div class=\"c-dash\">\n  <aside class=\"c-dash__side\">\n    <a class=\"c-dash__brand\" href=\"#\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"2\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"3.5\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"2\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"2\"/></svg><span>Estudio</span></a>\n    <nav class=\"c-dash__nav\" aria-label=\"Panel\">\n      <ul>\n        <li><a class=\"c-dash__link\" href=\"#resumen\" aria-current=\"page\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 12 12 3l9 9\"/><path d=\"M5 10v10h14V10\"/></svg><span>Resumen</span></a></li>\n        <li><a class=\"c-dash__link\" href=\"#pedidos\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"/><path d=\"M3 6h18\"/><path d=\"M16 10a4 4 0 0 1-8 0\"/></svg><span>Pedidos</span></a></li>\n        <li><a class=\"c-dash__link\" href=\"#clientes\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"8\" r=\"4\"/><path d=\"M2 21a7 7 0 0 1 14 0\"/><path d=\"M17 11a3 3 0 1 0 0-6\"/><path d=\"M22 21a6 6 0 0 0-4-5.6\"/></svg><span>Clientes</span></a></li>\n        <li><a class=\"c-dash__link\" href=\"#informes\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 3v18h18\"/><path d=\"M7 15l4-4 3 3 5-6\"/></svg><span>Informes</span></a></li>\n        <li><a class=\"c-dash__link\" href=\"#ajustes\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z\"/></svg><span>Ajustes</span></a></li>\n      </ul>\n    </nav>\n    <p class=\"c-dash__user\"><span class=\"c-dash__avatar\" aria-hidden=\"true\">AL</span><span>Alonso<small>Administrador</small></span></p>\n  </aside>\n  <main class=\"c-dash__main\">\n    <header class=\"c-dash__head\">\n      <div><h1 class=\"c-dash__title\">Resumen</h1><p class=\"c-dash__sub\">Septiembre 2026 · datos de ejemplo</p></div>\n      <div class=\"c-btn-row\"><button class=\"c-btn c-btn--outline c-btn--sm\" type=\"button\">Exportar</button><button class=\"c-btn c-btn--primary c-btn--sm\" type=\"button\">Nuevo pedido</button></div>\n    </header>\n    <div class=\"c-stat-grid c-dash__stats\">\n      <article class=\"c-stat\"><h2 class=\"c-stat__label\">Ingresos</h2><p class=\"c-stat__value\">S/ 48 200</p><p class=\"c-stat__delta\"><span aria-hidden=\"true\">↑</span> 12 % <span class=\"c-stat__vs\">frente a agosto</span></p><svg class=\"c-stat__spark\" data-values=\"31,33,30,36,38,37,41,44,43,48\" aria-hidden=\"true\" focusable=\"false\"></svg></article>\n      <article class=\"c-stat\"><h2 class=\"c-stat__label\">Pedidos</h2><p class=\"c-stat__value\">1 130</p><p class=\"c-stat__delta\"><span aria-hidden=\"true\">↑</span> 7 % <span class=\"c-stat__vs\">frente a agosto</span></p><svg class=\"c-stat__spark\" data-values=\"88,92,95,90,99,104,101,108,110,113\" aria-hidden=\"true\" focusable=\"false\"></svg></article>\n      <article class=\"c-stat\"><h2 class=\"c-stat__label\">Ticket medio</h2><p class=\"c-stat__value\">S/ 42,70</p><p class=\"c-stat__delta\"><span aria-hidden=\"true\">↑</span> 4 % <span class=\"c-stat__vs\">frente a agosto</span></p><svg class=\"c-stat__spark\" data-values=\"39,40,40.5,40,41,41.8,41.2,42,42.4,42.7\" aria-hidden=\"true\" focusable=\"false\"></svg></article>\n    </div>\n    <section class=\"c-dash__panel\">\n      <figure class=\"c-chart\" data-c-chart data-type=\"line\">\n        <figcaption class=\"c-chart__head\"><span class=\"c-chart__title\">Ingresos por semana (S/ miles)</span><span class=\"c-chart__note\">Datos de ejemplo</span></figcaption>\n        <div class=\"c-chart__legend\" aria-hidden=\"true\"></div>\n        <div class=\"c-chart__plot\" tabindex=\"0\"></div>\n        <p class=\"c-chart__readout\" aria-live=\"polite\"></p>\n        <details class=\"c-chart__data\"><summary>Ver datos</summary><table><thead><tr><th scope=\"col\">Semana</th><th scope=\"col\">Septiembre</th><th scope=\"col\">Agosto</th></tr></thead><tbody>\n          <tr><th scope=\"row\">S1</th><td>10.2</td><td>9.1</td></tr><tr><th scope=\"row\">S2</th><td>11.8</td><td>9.8</td></tr><tr><th scope=\"row\">S3</th><td>12.1</td><td>10.4</td></tr><tr><th scope=\"row\">S4</th><td>14.1</td><td>11.7</td></tr>\n        </tbody></table></details>\n      </figure>\n    </section>\n  </main>\n</div>\n"
    },
    {
      "type": "css",
      "url": "https://componentes-lovat.vercel.app/raw/dashboard/dashboard.css",
      "content": "/* Estructura de dashboard: barra lateral + contenido. Pocos componentes y densos; color solo del tema.\n   En pantallas angostas, la barra lateral pasa arriba como navegación horizontal. Necesita tokens.css. */\n.c-dash { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100%; width: 100%; background: var(--background); color: var(--foreground); }\n.c-dash__side { display: flex; flex-direction: column; gap: 1.25rem; padding: 1rem .75rem; border-right: 1px solid var(--border); background: var(--muted); }\n.c-dash__brand { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; color: var(--foreground); text-decoration: none; font-weight: 600; }\n.c-dash__brand svg { width: 1.25rem; height: 1.25rem; color: var(--primary); }\n.c-dash__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .125rem; }\n.c-dash__link { display: flex; align-items: center; gap: .625rem; padding: .5rem; border-radius: var(--radius); color: var(--muted-foreground); text-decoration: none; font-size: .875rem; transition: background-color .15s, color .15s; }\n.c-dash__link svg { width: 1rem; height: 1rem; flex: none; }\n.c-dash__link:hover { background: var(--accent); color: var(--accent-foreground); }\n.c-dash__link:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }\n.c-dash__link[aria-current=page] { background: var(--background); color: var(--foreground); font-weight: 500; box-shadow: 0 1px 2px 0 #0000000d, 0 0 0 1px var(--border); }\n.c-dash__user { margin: auto 0 0; display: flex; align-items: center; gap: .625rem; padding: .5rem; font-size: .875rem; font-weight: 500; }\n.c-dash__user small { display: block; font-size: .75rem; font-weight: 400; color: var(--muted-foreground); }\n.c-dash__avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-size: .6875rem; font-weight: 600; }\n.c-dash__main { display: grid; align-content: start; gap: 1.25rem; padding: 1.5rem; min-width: 0; }\n.c-dash__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; }\n.c-dash__title { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; }\n.c-dash__sub { margin: .125rem 0 0; font-size: .8125rem; color: var(--muted-foreground); }\n.c-dash__stats { max-width: none; }\n.c-dash__panel { padding: 1.125rem 1.25rem; border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); background: var(--card); color: var(--card-foreground); box-shadow: 0 1px 2px 0 #0000000d; min-width: 0; }\n.c-dash__panel .c-chart { max-width: none; }\n@media (width < 48rem) {\n  .c-dash { grid-template-columns: 1fr; }\n  .c-dash__side { flex-direction: row; align-items: center; gap: .5rem; padding: .5rem .75rem; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; }\n  .c-dash__nav ul { display: flex; }\n  .c-dash__link span { white-space: nowrap; }\n  .c-dash__brand span, .c-dash__user { display: none; }\n  .c-dash__main { padding: 1rem; }\n}\n"
    },
    {
      "type": "standalone",
      "url": "https://componentes-lovat.vercel.app/r/dashboard.html"
    }
  ],
  "tokensFile": "https://componentes-lovat.vercel.app/tokens.css",
  "darkTheme": "add class 'dark' to <html>",
  "contexto": "herramienta",
  "densidad": "alta",
  "tono": "sobria",
  "states": [
    "rest",
    "hover",
    "focus"
  ],
  "use": {
    "es": [
      "Para herramientas internas, paneles y administración.",
      "Cuando la persona vuelve a diario a revisar números."
    ],
    "en": [
      "For internal tools, panels and admin.",
      "When people come back daily to check numbers."
    ]
  },
  "avoid": {
    "es": [
      "Para una landing: usa secciones.",
      "Con más de 6 enlaces en la barra: agrupa."
    ],
    "en": [
      "For a landing page: use sections.",
      "With more than 6 sidebar links: group them."
    ]
  },
  "a11y": {
    "roles": [
      "navigation",
      "main"
    ],
    "keyboard": [
      {
        "keys": "Tab",
        "es": "Recorre navegación, botones y gráfico",
        "en": "Moves through navigation, buttons and chart"
      }
    ],
    "notes": {
      "es": [
        "<aside> con <nav> etiquetado y aria-current en la página actual.",
        "En móvil la barra lateral pasa arriba, con desplazamiento horizontal."
      ],
      "en": [
        "<aside> with a labelled <nav> and aria-current on the current page.",
        "On mobile the sidebar moves to the top with horizontal scroll."
      ]
    },
    "test": {
      "es": [
        "En 390 px, la navegación queda arriba y no hay scroll horizontal de la página."
      ],
      "en": [
        "At 390 px, navigation sits on top and the page doesn't scroll sideways."
      ]
    }
  },
  "issues": {
    "es": [],
    "en": []
  },
  "credits": [
    {
      "source": "coss ui (MIT) · card.tsx, sidebar.tsx (aspecto)",
      "url": "https://coss.com/ui"
    }
  ],
  "changes": [
    {
      "date": "2026-09-30",
      "es": "Primera versión",
      "en": "First version"
    }
  ],
  "partes": [],
  "pieza": "https://componentes-lovat.vercel.app/r/dashboard.html"
}