{
  "id": "evidence-office-case-console",
  "name": "Case Console",
  "theme": "evidence-office",
  "category": "Dashboard",
  "description": "A caseworker home screen where the queue is the page and the metrics are a thin band above it, not a wall of cards.",
  "layout": "Four-up metric band across the top at only 72px tall, then a two-column split of case queue and activity ledger; nothing is a card, every block is an outlined rectangle.",
  "modules": [
    {
      "key": "bar",
      "name": "Console bar",
      "html": "\n<header class=\"cbar\"><span class=\"cbar-brand\">Registry</span><nav><a href=\"#\" aria-current=\"page\">Cases</a><a href=\"#\">Intake</a><a href=\"#\">Reports</a><a href=\"#\">Registry</a></nav><span class=\"cbar-user\">M. Okafor · Band 6</span></header>"
    },
    {
      "key": "metrics",
      "name": "Metric band",
      "html": "\n<div class=\"mband\">\n  <div class=\"m\"><span class=\"m-k\">Open cases</span><span class=\"m-v\">148</span><span class=\"m-d up\">+6 wk</span></div>\n  <div class=\"m\"><span class=\"m-k\">Past target</span><span class=\"m-v\">12</span><span class=\"m-d down\">−3 wk</span></div>\n  <div class=\"m\"><span class=\"m-k\">Median age</span><span class=\"m-v\">19d</span><span class=\"m-d\">flat</span></div>\n  <div class=\"m\"><span class=\"m-k\">Awaiting evidence</span><span class=\"m-v\">37</span><span class=\"m-d up\">+11 wk</span></div>\n</div>"
    },
    {
      "key": "queue",
      "name": "Case queue",
      "html": "\n<section class=\"queue\">\n  <div class=\"sec-head\"><h2>Assigned to you</h2><span>34 cases</span></div>\n  <table>\n    <thead><tr><th scope=\"col\">Ref</th><th scope=\"col\">Subject</th><th scope=\"col\">Stage</th><th scope=\"col\">Age</th></tr></thead>\n    <tbody>\n      <tr><td class=\"ref\">C-4471</td><td>Bramley Lane, boundary</td><td><span class=\"stg stg-rev\">Review</span></td><td class=\"num\">31d</td></tr>\n      <tr><td class=\"ref\">C-4468</td><td>Halifax Mill, change of use</td><td><span class=\"stg stg-evi\">Evidence</span></td><td class=\"num\">28d</td></tr>\n      <tr><td class=\"ref\">C-4460</td><td>Ferry Road, listed consent</td><td><span class=\"stg stg-rev\">Review</span></td><td class=\"num\">24d</td></tr>\n      <tr><td class=\"ref\">C-4455</td><td>Ash Grove, tree order</td><td><span class=\"stg stg-dec\">Decision</span></td><td class=\"num\">21d</td></tr>\n      <tr><td class=\"ref\">C-4449</td><td>Quay Street, signage</td><td><span class=\"stg stg-evi\">Evidence</span></td><td class=\"num\">18d</td></tr>\n      <tr><td class=\"ref\">C-4441</td><td>Northfield, access</td><td><span class=\"stg stg-dec\">Decision</span></td><td class=\"num\">14d</td></tr>\n    </tbody>\n  </table>\n</section>"
    },
    {
      "key": "activity",
      "name": "Activity ledger",
      "html": "\n<aside class=\"act\">\n  <div class=\"sec-head\"><h2>Today</h2></div>\n  <ol>\n    <li><span class=\"t\">14:02</span><div><b>C-4471</b> evidence bundle accepted <em>R. Vasquez</em></div></li>\n    <li><span class=\"t\">13:41</span><div><b>C-4455</b> moved to Decision <em>You</em></div></li>\n    <li><span class=\"t\">11:19</span><div><b>C-4468</b> extension granted, 14 days <em>Committee</em></div></li>\n    <li><span class=\"t\">09:50</span><div><b>C-4482</b> opened from intake <em>Automatic</em></div></li>\n    <li><span class=\"t\">09:12</span><div><b>C-4460</b> consultee response overdue <em>System</em></div></li>\n  </ol>\n</aside>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "evidence-office-case-console",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:23:29+09:00",
    "updatedAt": "2026-08-29T18:23:29+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/evidence-office-case-console.json",
  "structure": "Four-up metric band across the top at only 72px tall, then a two-column split of case queue and activity ledger; nothing is a card, every block is an outlined rectangle.",
  "html": "<div class=\"dz dz-evidence-office-case-console\" data-design=\"evidence-office-case-console\" data-theme=\"evidence-office\">\n<section class=\"dz-mod\" data-mod=\"bar\" aria-label=\"Console bar\">\n<header class=\"cbar\"><span class=\"cbar-brand\">Registry</span><nav><a href=\"#\" aria-current=\"page\">Cases</a><a href=\"#\">Intake</a><a href=\"#\">Reports</a><a href=\"#\">Registry</a></nav><span class=\"cbar-user\">M. Okafor · Band 6</span></header></section><section class=\"dz-mod\" data-mod=\"metrics\" aria-label=\"Metric band\">\n<div class=\"mband\">\n  <div class=\"m\"><span class=\"m-k\">Open cases</span><span class=\"m-v\">148</span><span class=\"m-d up\">+6 wk</span></div>\n  <div class=\"m\"><span class=\"m-k\">Past target</span><span class=\"m-v\">12</span><span class=\"m-d down\">−3 wk</span></div>\n  <div class=\"m\"><span class=\"m-k\">Median age</span><span class=\"m-v\">19d</span><span class=\"m-d\">flat</span></div>\n  <div class=\"m\"><span class=\"m-k\">Awaiting evidence</span><span class=\"m-v\">37</span><span class=\"m-d up\">+11 wk</span></div>\n</div></section><div class=\"body\"><section class=\"dz-mod\" data-mod=\"queue\" aria-label=\"Case queue\">\n<section class=\"queue\">\n  <div class=\"sec-head\"><h2>Assigned to you</h2><span>34 cases</span></div>\n  <table>\n    <thead><tr><th scope=\"col\">Ref</th><th scope=\"col\">Subject</th><th scope=\"col\">Stage</th><th scope=\"col\">Age</th></tr></thead>\n    <tbody>\n      <tr><td class=\"ref\">C-4471</td><td>Bramley Lane, boundary</td><td><span class=\"stg stg-rev\">Review</span></td><td class=\"num\">31d</td></tr>\n      <tr><td class=\"ref\">C-4468</td><td>Halifax Mill, change of use</td><td><span class=\"stg stg-evi\">Evidence</span></td><td class=\"num\">28d</td></tr>\n      <tr><td class=\"ref\">C-4460</td><td>Ferry Road, listed consent</td><td><span class=\"stg stg-rev\">Review</span></td><td class=\"num\">24d</td></tr>\n      <tr><td class=\"ref\">C-4455</td><td>Ash Grove, tree order</td><td><span class=\"stg stg-dec\">Decision</span></td><td class=\"num\">21d</td></tr>\n      <tr><td class=\"ref\">C-4449</td><td>Quay Street, signage</td><td><span class=\"stg stg-evi\">Evidence</span></td><td class=\"num\">18d</td></tr>\n      <tr><td class=\"ref\">C-4441</td><td>Northfield, access</td><td><span class=\"stg stg-dec\">Decision</span></td><td class=\"num\">14d</td></tr>\n    </tbody>\n  </table>\n</section></section><section class=\"dz-mod\" data-mod=\"activity\" aria-label=\"Activity ledger\">\n<aside class=\"act\">\n  <div class=\"sec-head\"><h2>Today</h2></div>\n  <ol>\n    <li><span class=\"t\">14:02</span><div><b>C-4471</b> evidence bundle accepted <em>R. Vasquez</em></div></li>\n    <li><span class=\"t\">13:41</span><div><b>C-4455</b> moved to Decision <em>You</em></div></li>\n    <li><span class=\"t\">11:19</span><div><b>C-4468</b> extension granted, 14 days <em>Committee</em></div></li>\n    <li><span class=\"t\">09:50</span><div><b>C-4482</b> opened from intake <em>Automatic</em></div></li>\n    <li><span class=\"t\">09:12</span><div><b>C-4460</b> consultee response overdue <em>System</em></div></li>\n  </ol>\n</aside></section></div>\n</div>",
  "css": "\n.dz-evidence-office-case-console { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 0 0 26px; }\n.dz-evidence-office-case-console .cbar { display: flex; align-items: center; gap: 26px; padding: 13px 26px; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-case-console .cbar-brand { font-family: var(--pv-display); font-size: 16px; font-weight: 700; letter-spacing: -.02em; }\n.dz-evidence-office-case-console .cbar nav { display: flex; gap: 20px; }\n.dz-evidence-office-case-console .cbar a { font-size: 13.5px; color: var(--muted-foreground); text-decoration: none; transition: color var(--dur) var(--ease); }\n.dz-evidence-office-case-console .cbar a:hover, .dz-evidence-office-case-console .cbar a[aria-current] { color: var(--primary); }\n.dz-evidence-office-case-console .cbar-user { margin-left: auto; font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-evidence-office-case-console .mband { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-case-console .m { padding: 12px 22px; border-right: var(--pv-bw) solid var(--border); display: flex; flex-direction: column; gap: 3px; }\n.dz-evidence-office-case-console .m:last-child { border-right: 0; }\n.dz-evidence-office-case-console .m-k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-evidence-office-case-console .m-v { font-family: var(--pv-mono); font-size: 27px; line-height: 1; font-variant-numeric: tabular-nums; }\n.dz-evidence-office-case-console .m-d { font-size: 11.5px; color: var(--muted-foreground); }\n.dz-evidence-office-case-console .m-d.up { color: var(--chart-1); }\n.dz-evidence-office-case-console .m-d.down { color: var(--chart-3); }\n.dz-evidence-office-case-console .body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 26px; padding: 22px 26px 0; }\n.dz-evidence-office-case-console .sec-head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 9px; border-bottom: var(--pv-bw) solid var(--foreground); margin-bottom: 2px; }\n.dz-evidence-office-case-console .sec-head h2 { font-family: var(--pv-display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 0; }\n.dz-evidence-office-case-console .sec-head span { font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-evidence-office-case-console table { width: 100%; border-collapse: collapse; font-size: 13.5px; }\n.dz-evidence-office-case-console th { text-align: left; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 500; padding: 9px 10px 9px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-case-console td { padding: 9px 10px 9px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-case-console tbody tr { transition: background var(--dur) var(--ease); }\n.dz-evidence-office-case-console tbody tr:hover { background: var(--secondary); }\n.dz-evidence-office-case-console .ref { font-family: var(--pv-mono); color: var(--primary); }\n.dz-evidence-office-case-console .num { font-family: var(--pv-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--muted-foreground); }\n.dz-evidence-office-case-console .stg { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-sm); }\n.dz-evidence-office-case-console .stg-rev { color: var(--chart-2); border-color: var(--chart-2); }\n.dz-evidence-office-case-console .stg-evi { color: var(--chart-4); border-color: var(--chart-4); }\n.dz-evidence-office-case-console .stg-dec { color: var(--chart-1); border-color: var(--chart-1); }\n.dz-evidence-office-case-console .act ol { list-style: none; margin: 0; padding: 0; }\n.dz-evidence-office-case-console .act li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: var(--pv-bw) solid var(--border); font-size: 13px; }\n.dz-evidence-office-case-console .act .t { font-family: var(--pv-mono); font-size: 11.5px; color: var(--muted-foreground); }\n.dz-evidence-office-case-console .act b { font-family: var(--pv-mono); font-weight: 400; color: var(--primary); }\n.dz-evidence-office-case-console .act em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted-foreground); margin-top: 2px; }\n@media (prefers-reduced-motion: reduce) { .dz-evidence-office-case-console *, .dz-evidence-office-case-console *::before, .dz-evidence-office-case-console *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/evidence-office.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}