<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500" role="img"
     aria-label="Project dashboard showing progress, open requests, overdue items and planned versus actual progress per package">
  <defs>
    <style>
      .s  { font-family: 'Helvetica Neue', Arial, sans-serif; }
      .m  { font-family: Menlo, 'DejaVu Sans Mono', monospace; letter-spacing: .08em; }
      .ttl{ font-weight: 600; fill: #071a33; }
      .met{ fill: #66798d; }
      .sub{ fill: #8b9bab; }
      .nav{ fill: #8fa6ba; }
    </style>
  </defs>

  <rect width="800" height="500" fill="#f7f9fc"/>

  <!-- sidebar -->
  <rect x="0" y="0" width="164" height="500" fill="#071a33"/>
  <g transform="translate(24 32)">
    <rect x="0" y="0" width="10" height="10" fill="#f5b335"/>
    <rect x="0" y="14" width="10" height="10" fill="#3c6382"/>
    <rect x="14" y="0" width="10" height="10" fill="#3c6382"/>
    <rect x="14" y="14" width="10" height="10" fill="#159669"/>
    <text class="m" x="34" y="18" font-size="10" fill="#fff">PROJECT</text>
  </g>
  <g class="s" font-size="12.5">
    <rect x="12" y="94" width="140" height="30" rx="5" fill="#0f2c4b"/>
    <rect x="12" y="94" width="3" height="30" fill="#f5b335"/>
    <text x="32" y="114" fill="#ffffff" font-weight="600">Overview</text>
    <text class="nav" x="32" y="150">Schedule</text>
    <text class="nav" x="32" y="182">Requests</text>
    <text class="nav" x="32" y="214">Documents</text>
    <text class="nav" x="32" y="246">Photos &amp; 360°</text>
    <text class="nav" x="32" y="278">Quantities</text>
    <text class="nav" x="32" y="310">Reports</text>
  </g>
  <g>
    <rect x="112" y="170" width="30" height="18" rx="9" fill="#d65b4c"/>
    <text class="m" x="127" y="183" font-size="9" fill="#fff" text-anchor="middle">12</text>
  </g>
  <line x1="24" y1="344" x2="140" y2="344" stroke="#ffffff" stroke-opacity=".12"/>
  <text class="m" x="24" y="368" font-size="9" fill="#5f7b93">SUBPROJECTS</text>
  <g class="s" font-size="11.5" fill="#8fa6ba">
    <text x="24" y="392">Structure</text>
    <text x="24" y="414">MEP</text>
    <text x="24" y="436">Finishes</text>
  </g>

  <!-- top bar -->
  <rect x="164" y="0" width="636" height="60" fill="#fff"/>
  <line x1="164" y1="60" x2="800" y2="60" stroke="#e3e9f0"/>
  <text class="s ttl" x="192" y="37" font-size="18">Project overview</text>
  <text class="m sub" x="692" y="35" font-size="9" text-anchor="end">UPDATED 2 MIN AGO</text>
  <g transform="translate(724 30)">
    <circle cx="0" cy="0" r="12" fill="#0b2b4d"/><text class="m" x="0" y="3.5" font-size="8" fill="#fff" text-anchor="middle">PM</text>
    <circle cx="22" cy="0" r="12" fill="#3c6382"/><text class="m" x="22" y="3.5" font-size="8" fill="#fff" text-anchor="middle">QS</text>
    <circle cx="44" cy="0" r="12" fill="#8b9bab"/><text class="m" x="44" y="3.5" font-size="8" fill="#fff" text-anchor="middle">SC</text>
  </g>

  <!-- kpi tiles -->
  <g>
    <rect x="192" y="84" width="140" height="86" rx="6" fill="#fff" stroke="#e3e9f0"/>
    <text class="m sub" x="208" y="106" font-size="9">PROGRESS</text>
    <text class="s ttl" x="208" y="140" font-size="30">68%</text>
    <rect x="208" y="150" width="108" height="6" rx="3" fill="#eef3f8"/>
    <rect x="208" y="150" width="73" height="6" rx="3" fill="#159669"/>

    <rect x="344" y="84" width="140" height="86" rx="6" fill="#fff" stroke="#e3e9f0"/>
    <text class="m sub" x="360" y="106" font-size="9">OPEN REQUESTS</text>
    <text class="s ttl" x="360" y="140" font-size="30">12</text>
    <text class="m met" x="360" y="158" font-size="9">4 WITH CONSULTANT</text>

    <rect x="496" y="84" width="140" height="86" rx="6" fill="#fff" stroke="#e3e9f0"/>
    <text class="m sub" x="512" y="106" font-size="9">OVERDUE</text>
    <text class="s" x="512" y="140" font-size="30" font-weight="600" fill="#d65b4c">3</text>
    <text class="m met" x="512" y="158" font-size="9">NEEDS A DECISION</text>

    <rect x="648" y="84" width="128" height="86" rx="6" fill="#071a33"/>
    <text class="m" x="664" y="106" font-size="9" fill="#f5b335">AWAITING APPROVAL</text>
    <text class="s" x="664" y="140" font-size="30" font-weight="600" fill="#fff">5</text>
    <text class="m" x="664" y="158" font-size="9" fill="#8fa6ba">DOCUMENTS</text>
  </g>

  <!-- planned vs actual -->
  <rect x="192" y="192" width="444" height="272" rx="6" fill="#fff" stroke="#e3e9f0"/>
  <text class="s ttl" x="212" y="222" font-size="15">Planned vs actual</text>
  <g class="m sub" font-size="9">
    <text x="616" y="220" text-anchor="end">THIS WEEK</text>
  </g>
  <line x1="192" y1="238" x2="636" y2="238" stroke="#e3e9f0"/>
  <g>
    <!-- row 1 -->
    <text class="s" x="212" y="266" font-size="12.5" fill="#071a33">Substructure</text>
    <text class="m" x="616" y="266" font-size="10" text-anchor="end" fill="#0f6e4d">+2%</text>
    <rect x="212" y="274" width="404" height="7" rx="3.5" fill="#eef3f8"/>
    <rect x="212" y="274" width="380" height="7" rx="3.5" fill="#159669"/>
    <rect x="586" y="270" width="2" height="15" fill="#071a33"/>
    <!-- row 2 -->
    <text class="s" x="212" y="316" font-size="12.5" fill="#071a33">Structure, levels 1–4</text>
    <text class="m" x="616" y="316" font-size="10" text-anchor="end" fill="#66798d">on plan</text>
    <rect x="212" y="324" width="404" height="7" rx="3.5" fill="#eef3f8"/>
    <rect x="212" y="324" width="279" height="7" rx="3.5" fill="#0b2b4d"/>
    <rect x="489" y="320" width="2" height="15" fill="#071a33"/>
    <!-- row 3 -->
    <text class="s" x="212" y="366" font-size="12.5" fill="#071a33">MEP rough-in</text>
    <text class="m" x="616" y="366" font-size="10" text-anchor="end" fill="#a8412f">−15%</text>
    <rect x="212" y="374" width="404" height="7" rx="3.5" fill="#eef3f8"/>
    <rect x="212" y="374" width="121" height="7" rx="3.5" fill="#d65b4c"/>
    <rect x="393" y="370" width="2" height="15" fill="#071a33"/>
    <!-- row 4 -->
    <text class="s" x="212" y="416" font-size="12.5" fill="#071a33">Façade</text>
    <text class="m" x="616" y="416" font-size="10" text-anchor="end" fill="#66798d">not started</text>
    <rect x="212" y="424" width="404" height="7" rx="3.5" fill="#eef3f8"/>
    <rect x="252" y="420" width="2" height="15" fill="#071a33"/>
  </g>
  <g class="m sub" font-size="9">
    <rect x="212" y="444" width="12" height="4" rx="2" fill="#0b2b4d"/>
    <text x="232" y="449">ACTUAL</text>
    <rect x="292" y="441" width="2" height="10" fill="#071a33"/>
    <text x="304" y="449">PLAN</text>
  </g>

  <!-- activity -->
  <rect x="648" y="192" width="128" height="272" rx="6" fill="#fff" stroke="#e3e9f0"/>
  <text class="m sub" x="664" y="216" font-size="9">ACTIVITY</text>
  <g>
    <circle cx="668" cy="242" r="4" fill="#f5b335"/>
    <text class="s" x="682" y="238" font-size="10.5" fill="#071a33">Photo added</text>
    <text class="m sub" x="682" y="252" font-size="8">09:12 · SITE</text>

    <circle cx="668" cy="286" r="4" fill="#0b2b4d"/>
    <text class="s" x="682" y="282" font-size="10.5" fill="#071a33">RFI-024 raised</text>
    <text class="m sub" x="682" y="296" font-size="8">09:14</text>

    <circle cx="668" cy="330" r="4" fill="#0b2b4d"/>
    <text class="s" x="682" y="326" font-size="10.5" fill="#071a33">S-201 Rev C</text>
    <text class="m sub" x="682" y="340" font-size="8">09:20</text>

    <circle cx="668" cy="374" r="4" fill="#159669"/>
    <text class="s" x="682" y="370" font-size="10.5" fill="#071a33">Approval given</text>
    <text class="m sub" x="682" y="384" font-size="8">09:22</text>

    <circle cx="668" cy="418" r="4" fill="#159669"/>
    <text class="s" x="682" y="414" font-size="10.5" fill="#071a33">42 m³ poured</text>
    <text class="m sub" x="682" y="428" font-size="8">09:36 · SITE</text>
  </g>
</svg>
