<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
  <title id="title">Invoice Processing Automation</title>
  <desc id="desc">AI-powered invoice pipeline with extraction, matching, and status tracking</desc>
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#F8F5F0"/>
      <stop offset="1" stop-color="#EDE8E0"/>
    </linearGradient>
    <linearGradient id="sidebar" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#1C1714"/>
      <stop offset="1" stop-color="#2D2926"/>
    </linearGradient>
    <filter id="card-shadow">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#1C1714" flood-opacity="0.10"/>
    </filter>
    <filter id="panel-shadow">
      <feDropShadow dx="0" dy="16" stdDeviation="24" flood-color="#1C1714" flood-opacity="0.18"/>
    </filter>
  </defs>

  <rect width="1200" height="720" fill="url(#bg)"/>
  <rect x="36" y="28" width="1128" height="664" rx="14" fill="#FFFCF8" filter="url(#panel-shadow)"/>
  <rect x="36" y="28" width="1128" height="44" rx="14" fill="#F0EDE8"/>
  <rect x="36" y="54" width="1128" height="18" fill="#F0EDE8"/>
  <circle cx="62" cy="50" r="6" fill="#FF6058"/>
  <circle cx="82" cy="50" r="6" fill="#FFBD2E"/>
  <circle cx="102" cy="50" r="6" fill="#28CA42"/>
  <rect x="360" y="40" width="480" height="20" rx="4" fill="#E8E4DC"/>
  <text x="600" y="54" fill="#6B6560" font-size="10" font-family="system-ui" text-anchor="middle">invoice-pipeline.app/dashboard</text>

  <rect x="36" y="72" width="190" height="620" fill="url(#sidebar)"/>
  <rect x="52" y="88" width="28" height="28" rx="6" fill="#CF6A3C"/>
  <text x="88" y="107" fill="#F5F0E8" font-size="13" font-weight="700" font-family="system-ui">InvoiceAI</text>
  <rect x="52" y="136" width="158" height="32" rx="6" fill="rgba(207,106,60,0.22)"/>
  <rect x="62" y="148" width="10" height="10" rx="2" fill="#CF6A3C"/>
  <text x="80" y="157" fill="#F5F0E8" font-size="11" font-family="system-ui">Pipeline</text>
  <rect x="62" y="186" width="10" height="10" rx="2" fill="#6B6560"/>
  <text x="80" y="195" fill="#9B9490" font-size="11" font-family="system-ui">Invoices</text>
  <rect x="62" y="214" width="10" height="10" rx="2" fill="#6B6560"/>
  <text x="80" y="223" fill="#9B9490" font-size="11" font-family="system-ui">Exceptions</text>
  <rect x="62" y="242" width="10" height="10" rx="2" fill="#6B6560"/>
  <text x="80" y="251" fill="#9B9490" font-size="11" font-family="system-ui">Reports</text>
  <rect x="62" y="270" width="10" height="10" rx="2" fill="#6B6560"/>
  <text x="80" y="279" fill="#9B9490" font-size="11" font-family="system-ui">Settings</text>

  <text x="248" y="106" fill="#1C1714" font-size="18" font-weight="700" font-family="system-ui">Invoice Pipeline</text>
  <text x="248" y="124" fill="#6B6560" font-size="11" font-family="system-ui">Live processing · 87% automated this week</text>
  <rect x="980" y="88" width="80" height="30" rx="6" fill="#CF6A3C"/>
  <text x="1020" y="107" fill="#FFFCF8" font-size="11" font-weight="600" font-family="system-ui" text-anchor="middle">Run Now</text>
  <rect x="1070" y="88" width="78" height="30" rx="6" fill="#E8E4DC"/>
  <text x="1109" y="107" fill="#1C1714" font-size="11" font-family="system-ui" text-anchor="middle">Download</text>

  <rect x="248" y="140" width="168" height="80" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="264" y="165" fill="#6B6560" font-size="9" font-family="system-ui">THIS WEEK</text>
  <text x="264" y="192" fill="#1C1714" font-size="28" font-weight="800" font-family="system-ui">312</text>
  <text x="264" y="210" fill="#6B6560" font-size="9" font-family="system-ui">invoices processed</text>

  <rect x="428" y="140" width="168" height="80" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="444" y="165" fill="#6B6560" font-size="9" font-family="system-ui">AUTO-PROCESSED</text>
  <text x="444" y="192" fill="#28CA42" font-size="28" font-weight="800" font-family="system-ui">87%</text>
  <text x="444" y="210" fill="#6B6560" font-size="9" font-family="system-ui">271 / 312 automated</text>

  <rect x="608" y="140" width="168" height="80" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="624" y="165" fill="#6B6560" font-size="9" font-family="system-ui">TIME SAVED</text>
  <text x="624" y="192" fill="#CF6A3C" font-size="28" font-weight="800" font-family="system-ui">3 days</text>
  <text x="624" y="210" fill="#6B6560" font-size="9" font-family="system-ui">vs. manual before</text>

  <rect x="788" y="140" width="168" height="80" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="804" y="165" fill="#6B6560" font-size="9" font-family="system-ui">FLAGGED</text>
  <text x="804" y="192" fill="#FFBD2E" font-size="28" font-weight="800" font-family="system-ui">41</text>
  <text x="804" y="210" fill="#6B6560" font-size="9" font-family="system-ui">need human review</text>

  <rect x="968" y="140" width="168" height="80" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="984" y="165" fill="#6B6560" font-size="9" font-family="system-ui">ACCURACY</text>
  <text x="984" y="192" fill="#1C1714" font-size="28" font-weight="800" font-family="system-ui">99.1%</text>
  <text x="984" y="210" fill="#6B6560" font-size="9" font-family="system-ui">field extraction rate</text>

  <!-- Pipeline diagram -->
  <rect x="248" y="240" width="498" height="174" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="264" y="264" fill="#1C1714" font-size="13" font-weight="700" font-family="system-ui">Automation Pipeline</text>
  <rect x="264" y="278" width="80" height="60" rx="8" fill="#F0EDE8" stroke="#E8E4DC" stroke-width="1"/>
  <rect x="264" y="278" width="80" height="4" rx="2" fill="#CF6A3C"/>
  <text x="304" y="304" fill="#1C1714" font-size="9" font-weight="700" font-family="system-ui" text-anchor="middle">Email</text>
  <text x="304" y="316" fill="#1C1714" font-size="9" font-weight="700" font-family="system-ui" text-anchor="middle">Inbox</text>
  <text x="304" y="328" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">Gmail API</text>
  <polygon points="344,305 354,309 344,313" fill="#CF6A3C"/>
  <rect x="376" y="278" width="80" height="60" rx="8" fill="#F0EDE8" stroke="#E8E4DC" stroke-width="1"/>
  <rect x="376" y="278" width="80" height="4" rx="2" fill="#7B6ABA"/>
  <text x="416" y="304" fill="#1C1714" font-size="9" font-weight="700" font-family="system-ui" text-anchor="middle">GPT-4o</text>
  <text x="416" y="316" fill="#1C1714" font-size="9" font-weight="700" font-family="system-ui" text-anchor="middle">Extract</text>
  <text x="416" y="328" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">OpenAI API</text>
  <polygon points="456,305 466,309 456,313" fill="#CF6A3C"/>
  <rect x="488" y="278" width="80" height="60" rx="8" fill="#F0EDE8" stroke="#E8E4DC" stroke-width="1"/>
  <rect x="488" y="278" width="80" height="4" rx="2" fill="#28CA42"/>
  <text x="528" y="304" fill="#1C1714" font-size="9" font-weight="700" font-family="system-ui" text-anchor="middle">Match &amp;</text>
  <text x="528" y="316" fill="#1C1714" font-size="9" font-weight="700" font-family="system-ui" text-anchor="middle">Verify</text>
  <text x="528" y="328" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">Sheets API</text>
  <polygon points="568,305 578,309 568,313" fill="#CF6A3C"/>
  <rect x="600" y="278" width="80" height="60" rx="8" fill="#F0EDE8" stroke="#E8E4DC" stroke-width="1"/>
  <rect x="600" y="278" width="80" height="4" rx="2" fill="#2F80ED"/>
  <text x="640" y="304" fill="#1C1714" font-size="9" font-weight="700" font-family="system-ui" text-anchor="middle">Route &amp;</text>
  <text x="640" y="316" fill="#1C1714" font-size="9" font-weight="700" font-family="system-ui" text-anchor="middle">File</text>
  <text x="640" y="328" fill="#6B6560" font-size="8" font-family="system-ui" text-anchor="middle">Make.com</text>
  <rect x="264" y="356" width="60" height="20" rx="10" fill="rgba(40,202,66,0.12)"/>
  <text x="294" y="369" fill="#28CA42" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Auto-filed</text>
  <rect x="334" y="356" width="52" height="20" rx="10" fill="rgba(255,189,46,0.15)"/>
  <text x="360" y="369" fill="#B88A00" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Flagged</text>
  <rect x="396" y="356" width="52" height="20" rx="10" fill="rgba(255,96,88,0.12)"/>
  <text x="422" y="369" fill="#FF6058" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Error</text>
  <text x="460" y="369" fill="#9B9490" font-size="9" font-family="system-ui">24/7 · zero manual steps for 87%</text>

  <!-- GPT extraction view -->
  <rect x="762" y="240" width="374" height="174" rx="10" fill="#1C1714" filter="url(#card-shadow)"/>
  <text x="778" y="264" fill="#F5F0E8" font-size="12" font-weight="700" font-family="system-ui">AI Extraction — INV-2847</text>
  <text x="1118" y="264" fill="#28CA42" font-size="9" font-family="system-ui" text-anchor="end">● Live</text>
  <text x="778" y="285" fill="#9B9490" font-size="9" font-family="'Courier New', monospace">{</text>
  <text x="790" y="299" fill="#CF6A3C" font-size="9" font-family="'Courier New', monospace">"vendor":</text>
  <text x="848" y="299" fill="#28CA42" font-size="9" font-family="'Courier New', monospace">"Accra Freight Ltd",</text>
  <text x="790" y="313" fill="#CF6A3C" font-size="9" font-family="'Courier New', monospace">"invoice_no":</text>
  <text x="860" y="313" fill="#28CA42" font-size="9" font-family="'Courier New', monospace">"INV-2847",</text>
  <text x="790" y="327" fill="#CF6A3C" font-size="9" font-family="'Courier New', monospace">"amount":</text>
  <text x="848" y="327" fill="#FFBD2E" font-size="9" font-family="'Courier New', monospace">4250.00,</text>
  <text x="790" y="341" fill="#CF6A3C" font-size="9" font-family="'Courier New', monospace">"currency":</text>
  <text x="858" y="341" fill="#28CA42" font-size="9" font-family="'Courier New', monospace">"GHS",</text>
  <text x="790" y="355" fill="#CF6A3C" font-size="9" font-family="'Courier New', monospace">"matched":</text>
  <text x="848" y="355" fill="#28CA42" font-size="9" font-family="'Courier New', monospace">true</text>
  <text x="778" y="369" fill="#9B9490" font-size="9" font-family="'Courier New', monospace">}</text>
  <rect x="778" y="382" width="116" height="8" rx="4" fill="#28CA42" opacity="0.3"/>
  <rect x="900" y="382" width="100" height="8" rx="4" fill="#28CA42" opacity="0.15"/>

  <!-- Invoice table -->
  <rect x="248" y="428" width="888" height="250" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="264" y="454" fill="#1C1714" font-size="13" font-weight="700" font-family="system-ui">Recent Invoices</text>
  <text x="1116" y="454" fill="#CF6A3C" font-size="10" font-weight="600" font-family="system-ui" text-anchor="end">View all →</text>
  <rect x="248" y="462" width="888" height="24" fill="#F5F0E8"/>
  <text x="264" y="478" fill="#6B6560" font-size="10" font-weight="600" font-family="system-ui">INVOICE</text>
  <text x="430" y="478" fill="#6B6560" font-size="10" font-weight="600" font-family="system-ui">VENDOR</text>
  <text x="620" y="478" fill="#6B6560" font-size="10" font-weight="600" font-family="system-ui">AMOUNT</text>
  <text x="760" y="478" fill="#6B6560" font-size="10" font-weight="600" font-family="system-ui">EXTRACTED</text>
  <text x="880" y="478" fill="#6B6560" font-size="10" font-weight="600" font-family="system-ui">STATUS</text>
  <text x="1000" y="478" fill="#6B6560" font-size="10" font-weight="600" font-family="system-ui">FILED</text>

  <line x1="248" y1="486" x2="1136" y2="486" stroke="#E8E4DC" stroke-width="1"/>
  <text x="264" y="503" fill="#1C1714" font-size="11" font-family="system-ui">INV-2847</text>
  <text x="430" y="503" fill="#1C1714" font-size="11" font-family="system-ui">Accra Freight Ltd</text>
  <text x="620" y="503" fill="#1C1714" font-size="11" font-family="system-ui">GHS 4,250</text>
  <rect x="760" y="494" width="22" height="14" rx="7" fill="rgba(40,202,66,0.15)"/>
  <text x="771" y="504" fill="#28CA42" font-size="9" font-family="system-ui" text-anchor="middle">✓</text>
  <rect x="880" y="494" width="64" height="16" rx="8" fill="rgba(40,202,66,0.12)"/>
  <text x="912" y="505" fill="#28CA42" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Auto-filed</text>
  <text x="1000" y="503" fill="#6B6560" font-size="10" font-family="system-ui">07:42 AM</text>

  <line x1="248" y1="516" x2="1136" y2="516" stroke="#E8E4DC" stroke-width="1"/>
  <text x="264" y="533" fill="#1C1714" font-size="11" font-family="system-ui">INV-2846</text>
  <text x="430" y="533" fill="#1C1714" font-size="11" font-family="system-ui">TechSup Ghana</text>
  <text x="620" y="533" fill="#1C1714" font-size="11" font-family="system-ui">GHS 1,800</text>
  <rect x="760" y="524" width="22" height="14" rx="7" fill="rgba(40,202,66,0.15)"/>
  <text x="771" y="534" fill="#28CA42" font-size="9" font-family="system-ui" text-anchor="middle">✓</text>
  <rect x="880" y="524" width="64" height="16" rx="8" fill="rgba(40,202,66,0.12)"/>
  <text x="912" y="535" fill="#28CA42" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Auto-filed</text>
  <text x="1000" y="533" fill="#6B6560" font-size="10" font-family="system-ui">07:38 AM</text>

  <line x1="248" y1="546" x2="1136" y2="546" stroke="#E8E4DC" stroke-width="1"/>
  <text x="264" y="563" fill="#1C1714" font-size="11" font-family="system-ui">INV-2845</text>
  <text x="430" y="563" fill="#1C1714" font-size="11" font-family="system-ui">Delta Logistics Co.</text>
  <text x="620" y="563" fill="#1C1714" font-size="11" font-family="system-ui">GHS 9,100</text>
  <rect x="760" y="554" width="16" height="14" rx="7" fill="rgba(255,189,46,0.2)"/>
  <text x="768" y="564" fill="#B88A00" font-size="9" font-family="system-ui" text-anchor="middle">!</text>
  <rect x="880" y="554" width="52" height="16" rx="8" fill="rgba(255,189,46,0.15)"/>
  <text x="906" y="565" fill="#B88A00" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Flagged</text>
  <text x="1000" y="563" fill="#9B9490" font-size="10" font-family="system-ui">Pending</text>

  <line x1="248" y1="576" x2="1136" y2="576" stroke="#E8E4DC" stroke-width="1"/>
  <text x="264" y="593" fill="#1C1714" font-size="11" font-family="system-ui">INV-2844</text>
  <text x="430" y="593" fill="#1C1714" font-size="11" font-family="system-ui">Office Supplies Co.</text>
  <text x="620" y="593" fill="#1C1714" font-size="11" font-family="system-ui">GHS 320</text>
  <rect x="760" y="584" width="22" height="14" rx="7" fill="rgba(40,202,66,0.15)"/>
  <text x="771" y="594" fill="#28CA42" font-size="9" font-family="system-ui" text-anchor="middle">✓</text>
  <rect x="880" y="584" width="64" height="16" rx="8" fill="rgba(40,202,66,0.12)"/>
  <text x="912" y="595" fill="#28CA42" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Auto-filed</text>
  <text x="1000" y="593" fill="#6B6560" font-size="10" font-family="system-ui">06:59 AM</text>

  <line x1="248" y1="606" x2="1136" y2="606" stroke="#E8E4DC" stroke-width="1"/>
  <text x="264" y="623" fill="#1C1714" font-size="11" font-family="system-ui">INV-2843</text>
  <text x="430" y="623" fill="#1C1714" font-size="11" font-family="system-ui">Kumasi Warehousing</text>
  <text x="620" y="623" fill="#1C1714" font-size="11" font-family="system-ui">GHS 6,750</text>
  <rect x="760" y="614" width="22" height="14" rx="7" fill="rgba(40,202,66,0.15)"/>
  <text x="771" y="624" fill="#28CA42" font-size="9" font-family="system-ui" text-anchor="middle">✓</text>
  <rect x="880" y="614" width="64" height="16" rx="8" fill="rgba(40,202,66,0.12)"/>
  <text x="912" y="625" fill="#28CA42" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Auto-filed</text>
  <text x="1000" y="623" fill="#6B6560" font-size="10" font-family="system-ui">06:21 AM</text>

  <line x1="248" y1="636" x2="1136" y2="636" stroke="#E8E4DC" stroke-width="1"/>
  <text x="264" y="656" fill="#9B9490" font-size="10" font-family="system-ui">312 processed this week · 271 auto-filed · 41 flagged for review</text>
</svg>
