ukaiautomation/assets/images/dashboard-ecommerce.svg

<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="dashGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="chartGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#667eea;stop-opacity:0.8" />
      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.8" />
    </linearGradient>
  </defs>
  
  <!-- Dashboard Background -->
  <rect width="800" height="500" fill="#f8f9fa" rx="12"/>
  
  <!-- Header -->
  <rect x="0" y="0" width="800" height="60" fill="url(#dashGrad1)" rx="12"/>
  <text x="30" y="35" font-family="Inter, Arial, sans-serif" font-size="18" font-weight="600" fill="white">E-commerce Competitor Price Intelligence Dashboard</text>
  <text x="700" y="35" font-family="Arial" font-size="12" fill="white" opacity="0.8">Live Data</text>
  
  <!-- KPI Cards -->
  <rect x="30" y="90" width="180" height="100" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
  <text x="50" y="115" font-family="Arial" font-size="12" fill="#666">Total Products Monitored</text>
  <text x="50" y="140" font-family="Arial" font-size="32" font-weight="700" fill="url(#dashGrad1)">10,247</text>
  <text x="50" y="165" font-family="Arial" font-size="10" fill="#28a745">↑ 5.2% vs last week</text>
  
  <rect x="230" y="90" width="180" height="100" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
  <text x="250" y="115" font-family="Arial" font-size="12" fill="#666">Price Changes Today</text>
  <text x="250" y="140" font-family="Arial" font-size="32" font-weight="700" fill="url(#dashGrad1)">1,234</text>
  <text x="250" y="165" font-family="Arial" font-size="10" fill="#e74c3c">↑ 12.8% vs yesterday</text>
  
  <rect x="430" y="90" width="180" height="100" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
  <text x="450" y="115" font-family="Arial" font-size="12" fill="#666">Avg Price Difference</text>
  <text x="450" y="140" font-family="Arial" font-size="32" font-weight="700" fill="url(#dashGrad1)">-£2.34</text>
  <text x="450" y="165" font-family="Arial" font-size="10" fill="#28a745">Competitive advantage</text>
  
  <rect x="630" y="90" width="140" height="100" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
  <text x="650" y="115" font-family="Arial" font-size="12" fill="#666">Market Position</text>
  <text x="650" y="140" font-family="Arial" font-size="32" font-weight="700" fill="url(#dashGrad1)">#3</text>
  <text x="650" y="165" font-family="Arial" font-size="10" fill="#ffc107">of 15 competitors</text>
  
  <!-- Price Trend Chart -->
  <rect x="30" y="220" width="370" height="250" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
  <text x="50" y="245" font-family="Arial" font-size="14" font-weight="600" fill="#333">Price Trends - Last 30 Days</text>
  
  <!-- Chart Lines -->
  <polyline points="60,420 100,400 140,390 180,385 220,380 260,375 300,370 340,365 380,360" 
            stroke="#667eea" stroke-width="3" fill="none"/>
  <polyline points="60,430 100,425 140,420 180,415 220,410 260,405 300,400 340,395 380,390" 
            stroke="#e74c3c" stroke-width="2" fill="none" stroke-dasharray="5,5"/>
  <polyline points="60,440 100,438 140,435 180,430 220,425 260,420 300,415 340,410 380,405" 
            stroke="#28a745" stroke-width="2" fill="none" stroke-dasharray="3,3"/>
  
  <!-- Legend -->
  <rect x="60" y="260" width="10" height="3" fill="#667eea"/>
  <text x="75" y="268" font-family="Arial" font-size="10" fill="#666">Your Prices</text>
  <rect x="140" y="260" width="10" height="3" fill="#e74c3c"/>
  <text x="155" y="268" font-family="Arial" font-size="10" fill="#666">Competitor A</text>
  <rect x="220" y="260" width="10" height="3" fill="#28a745"/>
  <text x="235" y="268" font-family="Arial" font-size="10" fill="#666">Market Average</text>
  
  <!-- Top Competitors Table -->
  <rect x="420" y="220" width="350" height="250" fill="white" stroke="#e1e5e9" stroke-width="1" rx="8"/>
  <text x="440" y="245" font-family="Arial" font-size="14" font-weight="600" fill="#333">Top Competitors by Volume</text>
  
  <!-- Table Headers -->
  <text x="440" y="270" font-family="Arial" font-size="11" font-weight="600" fill="#666">Competitor</text>
  <text x="580" y="270" font-family="Arial" font-size="11" font-weight="600" fill="#666">Avg Price</text>
  <text x="680" y="270" font-family="Arial" font-size="11" font-weight="600" fill="#666">Change</text>
  
  <!-- Table Rows -->
  <text x="440" y="295" font-family="Arial" font-size="11" fill="#333">Amazon UK</text>
  <text x="580" y="295" font-family="Arial" font-size="11" fill="#333">£24.99</text>
  <text x="680" y="295" font-family="Arial" font-size="11" fill="#e74c3c">+2.1%</text>
  
  <text x="440" y="320" font-family="Arial" font-size="11" fill="#333">John Lewis</text>
  <text x="580" y="320" font-family="Arial" font-size="11" fill="#333">£27.50</text>
  <text x="680" y="320" font-family="Arial" font-size="11" fill="#28a745">-1.5%</text>
  
  <text x="440" y="345" font-family="Arial" font-size="11" fill="#333">Next</text>
  <text x="580" y="345" font-family="Arial" font-size="11" fill="#333">£23.99</text>
  <text x="680" y="345" font-family="Arial" font-size="11" fill="#ffc107">0.0%</text>
  
  <text x="440" y="370" font-family="Arial" font-size="11" fill="#333">ASOS</text>
  <text x="580" y="370" font-family="Arial" font-size="11" fill="#333">£22.75</text>
  <text x="680" y="370" font-family="Arial" font-size="11" fill="#e74c3c">+5.2%</text>
  
  <text x="440" y="395" font-family="Arial" font-size="11" fill="#333">Zara</text>
  <text x="580" y="395" font-family="Arial" font-size="11" fill="#333">£29.99</text>
  <text x="680" y="395" font-family="Arial" font-size="11" fill="#28a745">-3.1%</text>
  
  <!-- Status Indicators -->
  <circle cx="760" cy="30" r="5" fill="#28a745"/>
  <text x="680" y="35" font-family="Arial" font-size="10" fill="white" opacity="0.8">Data Fresh</text>
  
  <!-- Timestamp -->
  <text x="30" y="490" font-family="Arial" font-size="10" fill="#999">Last updated: Today 14:23 GMT | Data sources: 15 competitors | Update frequency: Real-time</text>
</svg>