Layouts for dashboards

📘What it really is

• A common dashboard layout: a side menu (or top menu on phones), a header with the page title and user menu, and a main area with summary cards above a table.

• Built with CSS Grid (Module 15):

.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; }
}

• Put the most important information first and largest: the counts that need action, not decoration.

• Summary cards show one number and a label each, and link to the filtered table ("12 new" goes to /?status=new).

• Consistency: one spacing scale, one palette, the same component for the same job (Modules 14 and 32).

• Component libraries (like shadcn/ui, Mantine or MUI) provide ready-made, accessible tables, menus and dialogs. They save time; still check them with your keyboard and screen reader.