{
  "id": "harbour-crane-productivity",
  "name": "Productivity",
  "theme": "harbour-crane",
  "category": "Data & Reports",
  "description": "A shift report where every chart is duotone amber against teal — one series and one reference — and the crane table truncates rather than wrapping.",
  "layout": "Four 2u summary tiles across the top, a single duotone chart at 4u spanning the field, then a fixed-height crane table beneath.",
  "modules": [
    {
      "key": "head",
      "name": "Report header",
      "html": "\n<header class=\"rh\"><div><span class=\"k\">Shift report · B · 06:00–18:00</span><h1>TERMINAL 2, 12 MARCH</h1></div><span class=\"op\">K. ADEYEMI · SUPERINTENDENT</span></header>"
    },
    {
      "key": "tiles",
      "name": "Summary tiles",
      "html": "\n<section class=\"fl\"><article class=\"tile u2\"><span class=\"k\">Gross moves</span><p class=\"big\">2,184</p><span class=\"k\">target 2,400</span></article><article class=\"tile u2\"><span class=\"k\">Moves per crane hour</span><p class=\"big\">27.4</p><span class=\"k\">target 30.0</span></article><article class=\"tile u2\"><span class=\"k\">Berth idle</span><p class=\"big\">41<small>m</small></p><span class=\"k\">of 720 min</span></article><article class=\"tile u2\"><span class=\"k\">Rehandles</span><p class=\"big bad\">198</p><span class=\"k\">9.1% of moves</span></article></section>"
    },
    {
      "key": "chart",
      "name": "Duotone chart",
      "html": "\n<article class=\"tile u4 ch\"><span class=\"k\">Moves per hour against target</span><div class=\"plot\"><div class=\"ref\"></div><div class=\"bars\"><i style=\"height:62%\"></i><i style=\"height:71%\"></i><i style=\"height:88%\"></i><i style=\"height:94%\"></i><i style=\"height:81%\"></i><i style=\"height:58%\"></i><i style=\"height:44%\"></i><i style=\"height:69%\"></i><i style=\"height:92%\"></i><i style=\"height:97%\"></i><i style=\"height:85%\"></i><i style=\"height:73%\"></i></div></div><div class=\"ax\"><span>06</span><span>08</span><span>10</span><span>12</span><span>14</span><span>16</span><span>18</span></div></article>"
    },
    {
      "key": "table",
      "name": "Crane table",
      "html": "\n<section class=\"tb\"><div class=\"hd\"><span>Equipment</span><span>Moves</span><span>Hours</span><span>Per hour</span><span>Longest stop</span><span>Reason</span></div>\n<div class=\"rw\"><span class=\"mn\">CR4</span><span class=\"mn\">418</span><span class=\"mn\">11.2</span><span class=\"mn\">37.3</span><span class=\"mn\">00:14</span><span class=\"cut\">LASHING GANG UNAVAILABLE</span></div>\n<div class=\"rw\"><span class=\"mn\">CR1</span><span class=\"mn\">392</span><span class=\"mn\">11.0</span><span class=\"mn\">35.6</span><span class=\"mn\">00:22</span><span class=\"cut\">HATCH COVER SEQUENCE CHANGED BY CHIEF OFFICER</span></div>\n<div class=\"rw\"><span class=\"mn\">CR6</span><span class=\"mn\">301</span><span class=\"mn\">10.4</span><span class=\"mn\">28.9</span><span class=\"mn\">01:06</span><span class=\"cut\">SPREADER FAULT — TWISTLOCK SENSOR</span></div>\n<div class=\"rw\"><span class=\"mn\">CR3</span><span class=\"mn\">288</span><span class=\"mn\">10.9</span><span class=\"mn\">26.4</span><span class=\"mn\">00:31</span><span class=\"cut\">WIND HOLD</span></div>\n<div class=\"rw\"><span class=\"mn\">RS1</span><span class=\"mn\">402</span><span class=\"mn\">11.4</span><span class=\"mn\">35.3</span><span class=\"mn\">00:09</span><span class=\"cut\">SHIFT CHANGE</span></div>\n<div class=\"rw\"><span class=\"mn\">RS2</span><span class=\"mn\">383</span><span class=\"mn\">11.4</span><span class=\"mn\">33.6</span><span class=\"mn\">00:11</span><span class=\"cut\">REFUELLING</span></div>\n</section>"
    }
  ],
  "moduleCount": 4,
  "reorderable": true,
  "meta": {
    "id": "harbour-crane-productivity",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-09-02T01:18:55+09:00",
    "updatedAt": "2026-09-02T01:18:55+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/harbour-crane-productivity.json",
  "structure": "Four 2u summary tiles across the top, a single duotone chart at 4u spanning the field, then a fixed-height crane table beneath.",
  "html": "<div class=\"dz dz-harbour-crane-productivity\" data-design=\"harbour-crane-productivity\" data-theme=\"harbour-crane\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Report header\">\n<header class=\"rh\"><div><span class=\"k\">Shift report · B · 06:00–18:00</span><h1>TERMINAL 2, 12 MARCH</h1></div><span class=\"op\">K. ADEYEMI · SUPERINTENDENT</span></header></section>\n<section class=\"dz-mod\" data-mod=\"tiles\" aria-label=\"Summary tiles\">\n<section class=\"fl\"><article class=\"tile u2\"><span class=\"k\">Gross moves</span><p class=\"big\">2,184</p><span class=\"k\">target 2,400</span></article><article class=\"tile u2\"><span class=\"k\">Moves per crane hour</span><p class=\"big\">27.4</p><span class=\"k\">target 30.0</span></article><article class=\"tile u2\"><span class=\"k\">Berth idle</span><p class=\"big\">41<small>m</small></p><span class=\"k\">of 720 min</span></article><article class=\"tile u2\"><span class=\"k\">Rehandles</span><p class=\"big bad\">198</p><span class=\"k\">9.1% of moves</span></article></section></section>\n<section class=\"dz-mod\" data-mod=\"chart\" aria-label=\"Duotone chart\">\n<article class=\"tile u4 ch\"><span class=\"k\">Moves per hour against target</span><div class=\"plot\"><div class=\"ref\"></div><div class=\"bars\"><i style=\"height:62%\"></i><i style=\"height:71%\"></i><i style=\"height:88%\"></i><i style=\"height:94%\"></i><i style=\"height:81%\"></i><i style=\"height:58%\"></i><i style=\"height:44%\"></i><i style=\"height:69%\"></i><i style=\"height:92%\"></i><i style=\"height:97%\"></i><i style=\"height:85%\"></i><i style=\"height:73%\"></i></div></div><div class=\"ax\"><span>06</span><span>08</span><span>10</span><span>12</span><span>14</span><span>16</span><span>18</span></div></article></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Crane table\">\n<section class=\"tb\"><div class=\"hd\"><span>Equipment</span><span>Moves</span><span>Hours</span><span>Per hour</span><span>Longest stop</span><span>Reason</span></div>\n<div class=\"rw\"><span class=\"mn\">CR4</span><span class=\"mn\">418</span><span class=\"mn\">11.2</span><span class=\"mn\">37.3</span><span class=\"mn\">00:14</span><span class=\"cut\">LASHING GANG UNAVAILABLE</span></div>\n<div class=\"rw\"><span class=\"mn\">CR1</span><span class=\"mn\">392</span><span class=\"mn\">11.0</span><span class=\"mn\">35.6</span><span class=\"mn\">00:22</span><span class=\"cut\">HATCH COVER SEQUENCE CHANGED BY CHIEF OFFICER</span></div>\n<div class=\"rw\"><span class=\"mn\">CR6</span><span class=\"mn\">301</span><span class=\"mn\">10.4</span><span class=\"mn\">28.9</span><span class=\"mn\">01:06</span><span class=\"cut\">SPREADER FAULT — TWISTLOCK SENSOR</span></div>\n<div class=\"rw\"><span class=\"mn\">CR3</span><span class=\"mn\">288</span><span class=\"mn\">10.9</span><span class=\"mn\">26.4</span><span class=\"mn\">00:31</span><span class=\"cut\">WIND HOLD</span></div>\n<div class=\"rw\"><span class=\"mn\">RS1</span><span class=\"mn\">402</span><span class=\"mn\">11.4</span><span class=\"mn\">35.3</span><span class=\"mn\">00:09</span><span class=\"cut\">SHIFT CHANGE</span></div>\n<div class=\"rw\"><span class=\"mn\">RS2</span><span class=\"mn\">383</span><span class=\"mn\">11.4</span><span class=\"mn\">33.6</span><span class=\"mn\">00:11</span><span class=\"cut\">REFUELLING</span></div>\n</section></section>\n</div>",
  "css": "\n.dz-harbour-crane-productivity { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 20px; }\n.dz-harbour-crane-productivity .k { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-harbour-crane-productivity .mn { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 12.5px; }\n.dz-harbour-crane-productivity .rh { display: flex; align-items: flex-end; gap: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--border); margin-bottom: 12px; }\n.dz-harbour-crane-productivity h1 { font-family: var(--pv-display); font-weight: 700; letter-spacing: -.01em; font-size: 30px; margin: 4px 0 0; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; font-size: 26px; }\n.dz-harbour-crane-productivity .op { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); margin-left: auto; }\n.dz-harbour-crane-productivity .fl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }\n\n.dz-harbour-crane-productivity .tile { background: var(--card); border: 2px solid var(--border); border-radius: 2px; padding: 14px; overflow: hidden; }\n.dz-harbour-crane-productivity .u1 { height: 88px; }\n.dz-harbour-crane-productivity .u2 { height: 184px; }\n.dz-harbour-crane-productivity .u4 { height: 376px; }\n.dz-harbour-crane-productivity .tile .k { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); display: block; }\n.dz-harbour-crane-productivity .cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; }\n.dz-harbour-crane-productivity .big { font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 52px; line-height: 1; margin: 10px 0 6px; letter-spacing: -.03em; }\n.dz-harbour-crane-productivity .big small { font-size: 24px; }\n.dz-harbour-crane-productivity .bad { color: var(--destructive); }\n.dz-harbour-crane-productivity .ch { margin-bottom: 12px; }\n.dz-harbour-crane-productivity .plot { position: relative; height: 280px; margin: 12px 0 6px; border-bottom: 2px solid var(--border); }\n.dz-harbour-crane-productivity .ref { position: absolute; left: 0; right: 0; top: 22%; border-top: 2px dashed var(--muted-foreground); }\n.dz-harbour-crane-productivity .bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 8px; }\n.dz-harbour-crane-productivity .bars i { flex: 1; background: var(--primary); border-radius: 2px 2px 0 0; display: block; }\n.dz-harbour-crane-productivity .ax { display: flex; justify-content: space-between; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 11px; color: var(--muted-foreground); }\n.dz-harbour-crane-productivity .tb .hd, .dz-harbour-crane-productivity .tb .rw { display: grid; grid-template-columns: 90px 80px 80px 90px 110px 1fr; gap: 12px; align-items: center; }\n.dz-harbour-crane-productivity .tb .hd { text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 700; color: var(--muted-foreground); height: 32px; border-bottom: 2px solid var(--border); }\n.dz-harbour-crane-productivity .tb .rw { height: 32px; border-bottom: 1px solid var(--border); }\n.dz-harbour-crane-productivity .cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--pv-mono); font-weight: 500; letter-spacing: .02em; font-size: 11.5px; color: var(--muted-foreground); }\n@media (prefers-reduced-motion: reduce) { .dz-harbour-crane-productivity *, .dz-harbour-crane-productivity *::before, .dz-harbour-crane-productivity *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }\n",
  "requiredTheme": "/api/v1/themes/harbour-crane.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600;700&display=swap"
}