{
  "id": "rust-freight-console",
  "name": "Dispatch Console",
  "theme": "rust-freight",
  "category": "App Shell",
  "description": "A dispatch screen split three ways so the planner never scrolls: jobs on the left, the chosen job in the middle, drivers on the right.",
  "layout": "Three fixed panes divided by 2px rules with no gutter, where the middle pane is a form and the outer two are lists, and a single action bar spans all three.",
  "modules": [
    {
      "key": "jobs",
      "name": "Job list",
      "html": "\n<nav class=\"jb\"><span class=\"k\">Unassigned · 14</span>\n<ul>\n  <li class=\"on\"><b class=\"id\">JOB-8841</b><span>Beckton → Rotterdam</span><span class=\"m\">Due 14:00 · 26.4 t</span></li>\n  <li><b class=\"id\">JOB-8842</b><span>Beckton → Hull</span><span class=\"m\">Due 16:30 · 18.2 t</span></li>\n  <li><b class=\"id\">JOB-8843</b><span>Carrfield → Beckton</span><span class=\"m\">Due 18:00 · 9.8 t</span></li>\n  <li><b class=\"id\">JOB-8844</b><span>Hollin Bank → Leeds</span><span class=\"m\">Tomorrow 06:00 · 22.0 t</span></li>\n  <li><b class=\"id\">JOB-8845</b><span>Beckton → Immingham</span><span class=\"m\">Tomorrow 09:00 · 30.4 t</span></li>\n</ul></nav>"
    },
    {
      "key": "detail",
      "name": "Job detail",
      "html": "\n<section class=\"dt\"><header><span class=\"k\">JOB-8841</span><h1>Beckton → Rotterdam</h1></header>\n<dl>\n  <div><dt>Load</dt><dd>Steel coil, secured · 26,400 kg</dd></div>\n  <div><dt>Unit</dt><dd class=\"id\">MSCU 774102 0</dd></div>\n  <div><dt>Collection</dt><dd>Bay C-21, from 10:00</dd></div>\n  <div><dt>Sailing</dt><dd>8412, cut-off 13:15</dd></div>\n  <div><dt>Special</dt><dd>Requires flatbed with twelve lashing points</dd></div>\n</dl>\n<div class=\"wn\"><span class=\"k\">Note from the yard</span><p>Coil is over-height by 60 mm. Route avoiding the Kirkstall bridge is already applied.</p></div></section>"
    },
    {
      "key": "drivers",
      "name": "Driver list",
      "html": "\n<aside class=\"dr\"><span class=\"k\">Available · 9</span>\n<ul>\n  <li><b>J. Oyelaran</b><span class=\"m\">Flatbed · 14 pts · 4h 20m left</span><button type=\"button\">Assign</button></li>\n  <li><b>M. Sandoval</b><span class=\"m\">Flatbed · 12 pts · 6h 05m left</span><button type=\"button\">Assign</button></li>\n  <li class=\"no\"><b>P. Ashworth</b><span class=\"m\">Curtain · 0 pts · 7h 40m left</span><button type=\"button\" disabled>Unsuitable</button></li>\n  <li><b>T. Merriweather</b><span class=\"m\">Flatbed · 16 pts · 2h 10m left</span><button type=\"button\">Assign</button></li>\n  <li class=\"no\"><b>K. Idowu</b><span class=\"m\">Flatbed · 12 pts · 0h 40m left</span><button type=\"button\" disabled>Hours</button></li>\n</ul></aside>"
    },
    {
      "key": "action",
      "name": "Action bar",
      "html": "\n<footer class=\"ab\"><span class=\"m\">Cut-off in 3 h 34 m. Two drivers meet the lashing requirement and have hours.</span><button type=\"button\">Hold</button><button type=\"button\" class=\"go\">Assign to J. Oyelaran</button></footer>"
    }
  ],
  "moduleCount": 4,
  "reorderable": false,
  "meta": {
    "id": "rust-freight-console",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-01T20:08:33+09:00",
    "updatedAt": "2026-09-01T20:08:33+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/rust-freight-console.json",
  "structure": "Three fixed panes divided by 2px rules with no gutter, where the middle pane is a form and the outer two are lists, and a single action bar spans all three.",
  "html": "<div class=\"dz dz-rust-freight-console\" data-design=\"rust-freight-console\" data-theme=\"rust-freight\">\n<section class=\"dz-mod\" data-mod=\"jobs\" aria-label=\"Job list\">\n<nav class=\"jb\"><span class=\"k\">Unassigned · 14</span>\n<ul>\n  <li class=\"on\"><b class=\"id\">JOB-8841</b><span>Beckton → Rotterdam</span><span class=\"m\">Due 14:00 · 26.4 t</span></li>\n  <li><b class=\"id\">JOB-8842</b><span>Beckton → Hull</span><span class=\"m\">Due 16:30 · 18.2 t</span></li>\n  <li><b class=\"id\">JOB-8843</b><span>Carrfield → Beckton</span><span class=\"m\">Due 18:00 · 9.8 t</span></li>\n  <li><b class=\"id\">JOB-8844</b><span>Hollin Bank → Leeds</span><span class=\"m\">Tomorrow 06:00 · 22.0 t</span></li>\n  <li><b class=\"id\">JOB-8845</b><span>Beckton → Immingham</span><span class=\"m\">Tomorrow 09:00 · 30.4 t</span></li>\n</ul></nav></section><section class=\"dz-mod\" data-mod=\"detail\" aria-label=\"Job detail\">\n<section class=\"dt\"><header><span class=\"k\">JOB-8841</span><h1>Beckton → Rotterdam</h1></header>\n<dl>\n  <div><dt>Load</dt><dd>Steel coil, secured · 26,400 kg</dd></div>\n  <div><dt>Unit</dt><dd class=\"id\">MSCU 774102 0</dd></div>\n  <div><dt>Collection</dt><dd>Bay C-21, from 10:00</dd></div>\n  <div><dt>Sailing</dt><dd>8412, cut-off 13:15</dd></div>\n  <div><dt>Special</dt><dd>Requires flatbed with twelve lashing points</dd></div>\n</dl>\n<div class=\"wn\"><span class=\"k\">Note from the yard</span><p>Coil is over-height by 60 mm. Route avoiding the Kirkstall bridge is already applied.</p></div></section></section><section class=\"dz-mod\" data-mod=\"drivers\" aria-label=\"Driver list\">\n<aside class=\"dr\"><span class=\"k\">Available · 9</span>\n<ul>\n  <li><b>J. Oyelaran</b><span class=\"m\">Flatbed · 14 pts · 4h 20m left</span><button type=\"button\">Assign</button></li>\n  <li><b>M. Sandoval</b><span class=\"m\">Flatbed · 12 pts · 6h 05m left</span><button type=\"button\">Assign</button></li>\n  <li class=\"no\"><b>P. Ashworth</b><span class=\"m\">Curtain · 0 pts · 7h 40m left</span><button type=\"button\" disabled>Unsuitable</button></li>\n  <li><b>T. Merriweather</b><span class=\"m\">Flatbed · 16 pts · 2h 10m left</span><button type=\"button\">Assign</button></li>\n  <li class=\"no\"><b>K. Idowu</b><span class=\"m\">Flatbed · 12 pts · 0h 40m left</span><button type=\"button\" disabled>Hours</button></li>\n</ul></aside></section><section class=\"dz-mod\" data-mod=\"action\" aria-label=\"Action bar\">\n<footer class=\"ab\"><span class=\"m\">Cut-off in 3 h 34 m. Two drivers meet the lashing requirement and have hours.</span><button type=\"button\">Hold</button><button type=\"button\" class=\"go\">Assign to J. Oyelaran</button></footer></section>\n</div>",
  "css": "\n.dz-rust-freight-console { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr) auto; min-height: 540px; }\n.dz-rust-freight-console .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-foreground); display: block; }\n.dz-rust-freight-console .jb { border-right: 2px solid var(--foreground); padding: 14px; overflow: auto; }\n.dz-rust-freight-console .jb ul, .dz-rust-freight-console .dr ul { list-style: none; margin: 10px 0 0; padding: 0; }\n.dz-rust-freight-console .jb li { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-bottom: var(--pv-bw) solid var(--border); cursor: pointer; min-height: 44px; }\n.dz-rust-freight-console .jb li:hover { background: var(--card); }\n.dz-rust-freight-console .jb .on { background: var(--card); border-left: 4px solid var(--primary); padding-left: 12px; }\n.dz-rust-freight-console .id { font-family: var(--pv-mono); font-size: 12.5px; font-weight: 700; }\n.dz-rust-freight-console .jb li span:not(.m) { font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 16px; }\n.dz-rust-freight-console .m { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); }\n.dz-rust-freight-console .dt { padding: 18px 22px; overflow: auto; }\n.dz-rust-freight-console .dt h1 { font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 32px; margin: 5px 0 18px; }\n.dz-rust-freight-console .dt dl { margin: 0; border-top: 2px solid var(--foreground); }\n.dz-rust-freight-console .dt dl div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-rust-freight-console .dt dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-foreground); }\n.dz-rust-freight-console .dt dd { margin: 0; font-size: 15px; }\n.dz-rust-freight-console .wn { border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); border-left-width: 8px; border-left-color: var(--accent); background: var(--card); padding: 12px 16px; margin-top: 18px; }\n.dz-rust-freight-console .wn p { font-size: 14px; line-height: 1.5; margin: 5px 0 0; }\n.dz-rust-freight-console .dr { border-left: 2px solid var(--foreground); padding: 14px; overflow: auto; }\n.dz-rust-freight-console .dr li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; padding: 10px 8px; border-bottom: var(--pv-bw) solid var(--border); min-height: 44px; }\n.dz-rust-freight-console .dr b { font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 16px; }\n.dz-rust-freight-console .dr .m { grid-column: 1 / 2; }\n.dz-rust-freight-console .dr button { grid-row: 1 / 3; font: inherit; font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 13px; background: transparent; color: var(--foreground); border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); padding: 6px 12px; cursor: pointer; }\n.dz-rust-freight-console .dr button:hover:not(:disabled) { background: var(--foreground); color: var(--background); }\n.dz-rust-freight-console .dr button:disabled { opacity: .4; cursor: not-allowed; }\n.dz-rust-freight-console .no { opacity: .62; }\n.dz-rust-freight-console .ab { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-top: 2px solid var(--foreground); background: var(--card); }\n.dz-rust-freight-console .ab .m { flex: 1; }\n.dz-rust-freight-console .ab button { font: inherit; font-family: var(--pv-display); text-transform: uppercase; font-weight: 500; letter-spacing: .01em; font-size: 16px; background: transparent; color: var(--foreground); border: 2px solid var(--foreground); border-radius: var(--pv-radius-md); padding: 10px 22px; cursor: pointer; }\n.dz-rust-freight-console .go { background: var(--primary) !important; color: var(--primary-foreground) !important; border-color: var(--primary) !important; }\n@media (prefers-reduced-motion: reduce) { .dz-rust-freight-console *, .dz-rust-freight-console *::before, .dz-rust-freight-console *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/rust-freight.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=Courier+Prime:wght@400;500;600;700&display=swap"
}