<div style="
    background:#F4EFE8;
    border-left:4px solid #E6B800;
    padding:14px 18px;
    margin:25px 0;
    font-size:16px;
    color:#2C4856;
">
    <strong>Tip:</strong> The navigation boxes in the image below are clickable.
</div>

<div class="diagram">

<svg xmlns="http://www.w3.org/2000/svg"
     width="1200" height="1600"
     font-family="Inter, Segoe UI, sans-serif">

  <!-- ========================= -->
  <!--   D&S LOGO + PAGE HEADER  -->
  <!-- ========================= -->

  <!-- Logo -->
  <circle cx="60" cy="60" r="40" stroke="#2C4856" stroke-dasharray="4" fill="none"/>
  <text x="40" y="65" font-size="22" font-weight="600" fill="#212529">D</text>
  <text x="55" y="65" font-size="22" font-weight="400" fill="#6c757d">&amp;</text>
  <text x="75" y="65" font-size="22" font-weight="600" fill="#212529">S</text>

  <!-- Header -->
  <text x="140" y="65" font-size="26" font-weight="600" fill="#2C4856">
    Supplier Portal
  </text>

  <!-- ========================= -->
  <!--   OUTER SECURITY FRAME    -->
  <!-- ========================= -->

  <!-- Outer container -->
  <rect x="40" y="120" width="1100" height="1400" rx="18"
        fill="none" stroke="#2C4856" stroke-width="3"/>

  <!-- Security Header (top-left inside container) -->
<a href="/wiki/docs/portal-overview/security/" target="_top">
  <text x="70" y="170" font-size="20" font-weight="600" fill="#2C4856">
    Security & Authentication
  </text>
</a>

<a href="/wiki/docs/portal-overview/security/" target="_top">
  <text x="70" y="200" font-size="15" fill="#6c757d">
    Microsoft O365 Tenant • OAuth Framework
  </text>
</a>


  <!-- Arrow marker -->
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
      <polygon points="0,0 10,5 0,10" fill="#e6b800"/>
    </marker>
  </defs>

  <!-- ========================= -->
  <!--   VERTICAL PROCESS FLOW   -->
  <!-- ========================= -->

  <!-- 1. Invite Supplier -->
  <a href="/wiki/docs/portal-overview/supplieronboardingform/">
    <rect x="70" y="260" width="1000" height="120" rx="10"
          fill="#ffffff" stroke="#2C4856" stroke-width="2"/>
    <text x="100" y="300" font-size="18" font-weight="600" fill="#2C4856">
      Invite Supplier
    </text>
    <text x="100" y="330" font-size="15" fill="#212529">
      Dodds & Shute staff send onboarding invites
    </text>
    <text x="100" y="355" font-size="14" fill="#6c757d">
      /supplier/invite
    </text>
  </a>

  <!-- Arrow -->
  <path d="M570 380 L570 430" stroke="#e6b800" stroke-width="4" marker-end="url(#arrow)"/>

  <!-- 2. Supplier Onboarding Form -->
  <a href="/wiki/docs/portal-overview/invite-a-supplier/">
    <rect x="70" y="430" width="1000" height="160" rx="10"
          fill="#ffffff" stroke="#2C4856" stroke-width="2"/>
    <text x="100" y="470" font-size="18" font-weight="600" fill="#2C4856">
      Supplier Onboarding Form
    </text>
    <text x="100" y="500" font-size="15" fill="#212529">
Supplier completes & submits form      

    </text>
    <text x="100" y="530" font-size="14" fill="#6c757d">
      Company • Bank • Commercial • Contact • Logistics • Other

    </text>
  </a>

  <!-- Arrow -->
  <path d="M570 590 L570 640" stroke="#e6b800" stroke-width="4" marker-end="url(#arrow)"/>

  <!-- 3. System Validation -->
  <a href="/wiki/docs/portal-overview/systemvalidation/">
    <rect x="70" y="640" width="1000" height="160" rx="10"
          fill="#ffffff" stroke="#2C4856" stroke-width="2"/>
    <text x="100" y="680" font-size="18" font-weight="600" fill="#2C4856">
      System Validation
    </text>
    <text x="100" y="710" font-size="15" fill="#212529">
      Rules defined by Dodds & Shute
    </text>
    <text x="100" y="735" font-size="15" fill="#212529">
      Errors returned with reason & link
    </text>
    <text x="100" y="760" font-size="14" fill="#6c757d">
      When clear → Finance Queue
    </text>
  </a>

  <!-- Arrow -->
  <path d="M570 800 L570 850" stroke="#e6b800" stroke-width="4" marker-end="url(#arrow)"/>

  <!-- 4. Finance Review -->
  <a href="/wiki/docs/portal-overview/finance_review/">
    <rect x="70" y="850" width="1000" height="160" rx="10"
          fill="#ffffff" stroke="#2C4856" stroke-width="2"/>
    <text x="100" y="890" font-size="18" font-weight="600" fill="#2C4856">
      Finance Review
    </text>
    <text x="100" y="920" font-size="15" fill="#212529">
      Credit checks & additional information
    </text>
    <text x="100" y="945" font-size="15" fill="#212529">
      Decisions: Reject • Request Update • Approve
    </text>
    <text x="100" y="970" font-size="14" fill="#6c757d">
      Editable email with secure link
    </text>
  </a>

  <!-- Arrow -->
  <path d="M570 1010 L570 1060" stroke="#e6b800" stroke-width="4" marker-end="url(#arrow)"/>

  <!-- 5. Publish Supplier Register -->
  <a href="/wiki/docs/portal-overview/publish_register/">
    <rect x="70" y="1060" width="1000" height="140" rx="10"
          fill="#ffffff" stroke="#2C4856" stroke-width="2"/>
    <text x="100" y="1100" font-size="18" font-weight="600" fill="#2C4856">
      Publish Supplier Register
    </text>
    <text x="100" y="1130" font-size="15" fill="#212529">
      Supplier created & register published
    </text>
    <text x="100" y="1155" font-size="14" fill="#6c757d">
      Updates timestamped & available via API
    </text>
  </a>

</svg>

</div>