{
  "id": "SC05",
  "title": "Dashboard",
  "topic": "screen-structure",
  "use": "The screen that shows the state of several areas and from which the work goes on. Each tile carries one topic and one question it answers. The tile is one building block of three zones — header, content and the way on — and the content is exchangeable, here a figure, a list and a sentence. A dashboard that has to be filtered is a list in disguise.",
  "decisions": [
    "The tile is one building block, not copies: a header with icon, title and at most one figure on the right, a content zone, and the way on — hand-written tiles drift apart as soon as one changes.",
    "The content zone is exchangeable: a figure and a list are the common cases, not the only allowed ones, so this dashboard shows both and a sentence.",
    "No lines inside the tile: space separates the zones.",
    "One way on per tile, and the tile itself is not a link: two targets in one surface are a choice nobody wants to make.",
    "The way on sits at the bottom edge, not right after the content: in a row of uneven contents the ways would otherwise stand at three heights.",
    "Every tile of a row has the same zones: titles, figures and ways on line up, and the empty space in a shorter tile stays empty."
  ],
  "try": [
    {
      "do": "Compare the three tiles of the first row",
      "then": "the same zones in each, so titles, figures and ways on share one line"
    },
    {
      "do": "Look at the second row",
      "then": "two list tiles and one with a sentence, all built from the same card"
    },
    {
      "do": "Look at the ways on at the bottom",
      "then": "they sit at the bottom edge, also where the content is shorter"
    },
    {
      "do": "Read the counter in the header of the first list tile",
      "then": "5/52 says that the list is a subset"
    },
    {
      "do": "Make the window narrower",
      "then": "the grid takes fewer columns, and each row works out its height again"
    }
  ],
  "revision": 1,
  "changes": [],
  "reviewed": true,
  "source": "<div class=\"ed-stack ed-gap-7\">\n  <section class=\"ed-stack ed-gap-4\">\n    <div class=\"ed-cluster ed-gap-3 ed-align-items-baseline\">\n      <h2>Accounting</h2>\n      <span class=\"ed-caption-s\">As of today, 07:40</span>\n    </div>\n    <div class=\"ed-grid ed-gap-5\" style=\"--ed-grid-min-column-size: 15rem\">\n      <ed-card>\n        <ed-icon slot=\"header-start\" name=\"inbox_in\"></ed-icon>\n        <h3 slot=\"header\">Incoming documents</h3>\n        <div class=\"ed-stack ed-gap-2 ed-align-items-start\">\n          <div class=\"ed-kpi\">\n            <span class=\"ed-kpi-value\">137</span>\n            <span>documents open</span>\n          </div>\n          <p class=\"ed-caption-s\">Only documents from an e-invoice are counted here</p>\n          <ed-badge variant=\"success\">21 since yesterday</ed-badge>\n        </div>\n        <ed-button slot=\"footer\" appearance=\"plain\" href=\"#\">\n          Open documents\n          <ed-icon slot=\"end\" name=\"right\"></ed-icon>\n        </ed-button>\n      </ed-card>\n\n      <ed-card>\n        <ed-icon slot=\"header-start\" name=\"warning\"></ed-icon>\n        <h3 slot=\"header\">Review notes</h3>\n        <div class=\"ed-stack ed-gap-2 ed-align-items-start\">\n          <div class=\"ed-kpi\">\n            <span class=\"ed-kpi-value\">8</span>\n            <span>notes</span>\n          </div>\n          <p class=\"ed-caption-s\">Four of them concern VAT</p>\n          <ed-badge variant=\"danger\">3 new</ed-badge>\n        </div>\n        <ed-button slot=\"footer\" appearance=\"plain\" href=\"#\">\n          View review notes\n          <ed-icon slot=\"end\" name=\"right\"></ed-icon>\n        </ed-button>\n      </ed-card>\n\n      <ed-card>\n        <ed-icon slot=\"header-start\" name=\"check_circle\"></ed-icon>\n        <h3 slot=\"header\">Finalized</h3>\n        <div class=\"ed-stack ed-gap-2 ed-align-items-start\">\n          <div class=\"ed-kpi\">\n            <span class=\"ed-kpi-value ed-text-tabular\">1,284</span>\n            <span>entries</span>\n          </div>\n          <p class=\"ed-caption-s\">August 2026, closed on September 2</p>\n          <ed-badge variant=\"neutral\">closed</ed-badge>\n        </div>\n        <ed-button slot=\"footer\" appearance=\"plain\" href=\"#\">\n          Open the August journal\n          <ed-icon slot=\"end\" name=\"right\"></ed-icon>\n        </ed-button>\n      </ed-card>\n    </div>\n  </section>\n\n  <section class=\"ed-stack ed-gap-4\">\n    <div class=\"ed-cluster ed-gap-3 ed-align-items-baseline\">\n      <h2>Payroll and HR</h2>\n      <span class=\"ed-caption-s\">Payroll month September</span>\n    </div>\n    <div class=\"ed-grid ed-gap-5\" style=\"--ed-grid-min-column-size: 15rem\">\n      <ed-card>\n        <ed-icon slot=\"header-start\" name=\"clock\"></ed-icon>\n        <h3 slot=\"header\">Waiting for timesheets</h3>\n        <ed-badge slot=\"header-end\" variant=\"neutral\">5/52</ed-badge>\n        <ul class=\"ed-list-plain ed-stack ed-gap-2\">\n          <li class=\"ed-stack ed-gap-0\">\n            <span class=\"ed-font-weight-medium\">Bergmann &amp; Söhne Fahrzeugtechnik</span>\n            <span class=\"ed-caption-s\">Timesheets missing for 4 employees</span>\n          </li>\n          <li class=\"ed-stack ed-gap-0\">\n            <span class=\"ed-font-weight-medium\">Odenwälder Präzisionsguss</span>\n            <span class=\"ed-caption-s\">September bonuses open</span>\n          </li>\n          <li class=\"ed-stack ed-gap-0\">\n            <span class=\"ed-font-weight-medium\">Steinbach-Wallner Immobilien</span>\n            <span class=\"ed-caption-s\">Start on September 15 not confirmed</span>\n          </li>\n          <li class=\"ed-stack ed-gap-0\">\n            <span class=\"ed-font-weight-medium\">Bäckerei Pfeiffer-Zimmermann</span>\n            <span class=\"ed-caption-s\">Timesheets missing for 2 employees</span>\n          </li>\n          <li class=\"ed-stack ed-gap-0\">\n            <span class=\"ed-font-weight-medium\">Dr. Kettner-Lohmeyer MVZ</span>\n            <span class=\"ed-caption-s\">Vacation days not reported</span>\n          </li>\n        </ul>\n        <ed-button slot=\"footer\" appearance=\"plain\" href=\"#\">\n          Open pending payrolls\n          <ed-icon slot=\"end\" name=\"right\"></ed-icon>\n        </ed-button>\n      </ed-card>\n\n      <ed-card>\n        <ed-icon slot=\"header-start\" name=\"employee-data\"></ed-icon>\n        <h3 slot=\"header\">Absences without a certificate</h3>\n        <ul class=\"ed-list-plain ed-stack ed-gap-2\">\n          <li class=\"ed-stack ed-gap-0\">\n            <span class=\"ed-font-weight-medium\">Kowalczyk, Marek</span>\n            <span class=\"ed-caption-s\">Since August 21, 12 days</span>\n          </li>\n          <li class=\"ed-stack ed-gap-0\">\n            <span class=\"ed-font-weight-medium\">Weißgerber, Nadine</span>\n            <span class=\"ed-caption-s\">Since September 1, 3 days</span>\n          </li>\n          <li class=\"ed-stack ed-gap-0\">\n            <span class=\"ed-font-weight-medium\">Odenthal, Sven</span>\n            <span class=\"ed-caption-s\">Since September 4, 1 day</span>\n          </li>\n        </ul>\n        <ed-button slot=\"footer\" appearance=\"plain\" href=\"#\">\n          Review absences\n          <ed-icon slot=\"end\" name=\"right\"></ed-icon>\n        </ed-button>\n      </ed-card>\n\n      <ed-card>\n        <ed-icon slot=\"header-start\" name=\"send\"></ed-icon>\n        <h3 slot=\"header\">Filings</h3>\n        <div class=\"ed-stack ed-gap-2 ed-align-items-start\">\n          <p>All filings for September have been submitted and acknowledged.</p>\n          <ed-badge variant=\"success\">complete</ed-badge>\n        </div>\n        <ed-button slot=\"footer\" appearance=\"plain\" href=\"#\">\n          Open the filing log\n          <ed-icon slot=\"end\" name=\"right\"></ed-icon>\n        </ed-button>\n      </ed-card>\n    </div>\n  </section>\n</div>",
  "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/screen-structure/sc05-dashboard/",
  "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/screen-structure/"
}
