<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 720" role="img" aria-labelledby="title desc">
  <title id="title">School Management Portal</title>
  <desc id="desc">Custom school admin dashboard with attendance, grades, and parent communication</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>
    <linearGradient id="barA" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#CF6A3C"/>
      <stop offset="1" stop-color="#E8895A"/>
    </linearGradient>
    <linearGradient id="barB" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#7B6ABA"/>
      <stop offset="1" stop-color="#9B8CD8"/>
    </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>

  <!-- Background -->
  <rect width="1200" height="720" fill="url(#bg)"/>

  <!-- Browser chrome -->
  <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"/>
  <!-- Traffic lights -->
  <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"/>
  <!-- Address bar -->
  <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">school-portal.app/dashboard</text>

  <!-- Sidebar -->
  <rect x="36" y="72" width="200" height="620" fill="url(#sidebar)"/>
  <!-- Logo area -->
  <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">SchoolHub</text>
  <!-- Nav items -->
  <rect x="52" y="136" width="168" 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">Dashboard</text>

  <rect x="62" y="188" width="10" height="10" rx="2" fill="#6B6560"/>
  <text x="80" y="197" fill="#9B9490" font-size="11" font-family="system-ui">Attendance</text>
  <rect x="62" y="218" width="10" height="10" rx="2" fill="#6B6560"/>
  <text x="80" y="227" fill="#9B9490" font-size="11" font-family="system-ui">Students</text>
  <rect x="62" y="248" width="10" height="10" rx="2" fill="#6B6560"/>
  <text x="80" y="257" fill="#9B9490" font-size="11" font-family="system-ui">Grades</text>
  <rect x="62" y="278" width="10" height="10" rx="2" fill="#6B6560"/>
  <text x="80" y="287" fill="#9B9490" font-size="11" font-family="system-ui">Fees</text>
  <rect x="62" y="308" width="10" height="10" rx="2" fill="#6B6560"/>
  <text x="80" y="317" fill="#9B9490" font-size="11" font-family="system-ui">Messages</text>
  <rect x="62" y="338" width="10" height="10" rx="2" fill="#6B6560"/>
  <text x="80" y="347" fill="#9B9490" font-size="11" font-family="system-ui">Reports</text>
  <!-- Avatar at bottom -->
  <circle cx="66" cy="660" r="14" fill="#CF6A3C" opacity="0.7"/>
  <text x="88" y="658" fill="#9B9490" font-size="10" font-family="system-ui">Admin User</text>
  <text x="88" y="670" fill="#6B6560" font-size="9" font-family="system-ui">admin@school.edu</text>

  <!-- Main content area -->
  <!-- Header -->
  <text x="256" y="106" fill="#1C1714" font-size="18" font-weight="700" font-family="system-ui">Good morning, Admin</text>
  <text x="256" y="124" fill="#6B6560" font-size="11" font-family="system-ui">Tuesday, 28 April 2026 · Term 2, Week 6</text>
  <!-- Action buttons -->
  <rect x="980" y="88" width="100" height="30" rx="6" fill="#CF6A3C"/>
  <text x="1030" y="107" fill="#FFFCF8" font-size="11" font-weight="600" font-family="system-ui" text-anchor="middle">+ New Report</text>
  <rect x="1092" y="88" width="56" height="30" rx="6" fill="#E8E4DC"/>
  <text x="1120" y="107" fill="#1C1714" font-size="11" font-family="system-ui" text-anchor="middle">Export</text>

  <!-- Stat cards row -->
  <!-- Card 1: Total Students -->
  <rect x="256" y="140" width="192" height="88" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="272" y="168" fill="#6B6560" font-size="10" font-family="system-ui">TOTAL STUDENTS</text>
  <text x="272" y="196" fill="#1C1714" font-size="30" font-weight="800" font-family="system-ui">428</text>
  <rect x="272" y="210" width="48" height="6" rx="3" fill="#28CA42" opacity="0.7"/>
  <text x="326" y="216" fill="#28CA42" font-size="9" font-family="system-ui">+12 this term</text>

  <!-- Card 2: Today's Attendance -->
  <rect x="464" y="140" width="192" height="88" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="480" y="168" fill="#6B6560" font-size="10" font-family="system-ui">TODAY'S ATTENDANCE</text>
  <text x="480" y="196" fill="#1C1714" font-size="30" font-weight="800" font-family="system-ui">94.2%</text>
  <rect x="480" y="210" width="80" height="6" rx="3" fill="#CF6A3C"/>
  <text x="566" y="216" fill="#6B6560" font-size="9" font-family="system-ui">403 / 428</text>

  <!-- Card 3: Outstanding Fees -->
  <rect x="672" y="140" width="192" height="88" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="688" y="168" fill="#6B6560" font-size="10" font-family="system-ui">OUTSTANDING FEES</text>
  <text x="688" y="196" fill="#1C1714" font-size="30" font-weight="800" font-family="system-ui">GHS 4.2k</text>
  <rect x="688" y="210" width="60" height="6" rx="3" fill="#FFBD2E" opacity="0.8"/>
  <text x="754" y="216" fill="#6B6560" font-size="9" font-family="system-ui">18 accounts</text>

  <!-- Card 4: Unread Messages -->
  <rect x="880" y="140" width="192" height="88" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="896" y="168" fill="#6B6560" font-size="10" font-family="system-ui">PARENT MESSAGES</text>
  <text x="896" y="196" fill="#1C1714" font-size="30" font-weight="800" font-family="system-ui">7</text>
  <rect x="1044" y="152" width="20" height="20" rx="10" fill="#CF6A3C"/>
  <text x="1054" y="166" fill="#FFFCF8" font-size="10" font-weight="700" font-family="system-ui" text-anchor="middle">7</text>
  <text x="896" y="216" fill="#6B6560" font-size="9" font-family="system-ui">unread messages</text>

  <!-- Attendance chart section -->
  <rect x="256" y="248" width="450" height="200" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="272" y="274" fill="#1C1714" font-size="13" font-weight="700" font-family="system-ui">Weekly Attendance</text>
  <text x="686" y="274" fill="#6B6560" font-size="10" font-family="system-ui" text-anchor="end">This week</text>
  <!-- Chart bars -->
  <rect x="296" y="360" width="36" height="60" rx="4" fill="url(#barA)" opacity="0.9"/>
  <rect x="352" y="340" width="36" height="80" rx="4" fill="url(#barA)" opacity="0.9"/>
  <rect x="408" y="310" width="36" height="110" rx="4" fill="url(#barA)" opacity="0.9"/>
  <rect x="464" y="320" width="36" height="100" rx="4" fill="url(#barA)" opacity="0.9"/>
  <rect x="520" y="330" width="36" height="90" rx="4" fill="url(#barA)" opacity="0.9"/>
  <rect x="576" y="355" width="36" height="65" rx="4" fill="#E8E4DC"/>
  <rect x="632" y="350" width="36" height="70" rx="4" fill="#E8E4DC"/>
  <!-- Axis labels -->
  <text x="314" y="432" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Mon</text>
  <text x="370" y="432" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Tue</text>
  <text x="426" y="432" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Wed</text>
  <text x="482" y="432" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Thu</text>
  <text x="538" y="432" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Fri</text>
  <text x="594" y="432" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Sat</text>
  <text x="650" y="432" fill="#9B9490" font-size="9" font-family="system-ui" text-anchor="middle">Sun</text>
  <!-- Grid lines -->
  <line x1="280" y1="420" x2="680" y2="420" stroke="#E8E4DC" stroke-width="1"/>
  <line x1="280" y1="390" x2="680" y2="390" stroke="#E8E4DC" stroke-width="1" stroke-dasharray="3,3"/>
  <line x1="280" y1="360" x2="680" y2="360" stroke="#E8E4DC" stroke-width="1" stroke-dasharray="3,3"/>
  <line x1="280" y1="330" x2="680" y2="330" stroke="#E8E4DC" stroke-width="1" stroke-dasharray="3,3"/>
  <line x1="280" y1="300" x2="680" y2="300" stroke="#E8E4DC" stroke-width="1" stroke-dasharray="3,3"/>

  <!-- Grade distribution (right side of chart area) -->
  <rect x="724" y="248" width="348" height="200" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="740" y="274" fill="#1C1714" font-size="13" font-weight="700" font-family="system-ui">Grade Distribution</text>
  <!-- Donut-style bars -->
  <text x="740" y="306" fill="#6B6560" font-size="10" font-family="system-ui">A (Excellent)</text>
  <rect x="820" y="296" width="180" height="12" rx="6" fill="#E8E4DC"/>
  <rect x="820" y="296" width="108" height="12" rx="6" fill="#28CA42" opacity="0.75"/>
  <text x="1006" y="306" fill="#6B6560" font-size="10" font-family="system-ui">60%</text>

  <text x="740" y="330" fill="#6B6560" font-size="10" font-family="system-ui">B (Good)</text>
  <rect x="820" y="320" width="180" height="12" rx="6" fill="#E8E4DC"/>
  <rect x="820" y="320" width="54" height="12" rx="6" fill="url(#barA)"/>
  <text x="1006" y="330" fill="#6B6560" font-size="10" font-family="system-ui">30%</text>

  <text x="740" y="354" fill="#6B6560" font-size="10" font-family="system-ui">C (Average)</text>
  <rect x="820" y="344" width="180" height="12" rx="6" fill="#E8E4DC"/>
  <rect x="820" y="344" width="27" height="12" rx="6" fill="url(#barB)"/>
  <text x="1006" y="354" fill="#6B6560" font-size="10" font-family="system-ui">15%</text>

  <text x="740" y="378" fill="#6B6560" font-size="10" font-family="system-ui">D / F (Below avg)</text>
  <rect x="820" y="368" width="180" height="12" rx="6" fill="#E8E4DC"/>
  <rect x="820" y="368" width="9" height="12" rx="6" fill="#FF6058" opacity="0.7"/>
  <text x="1006" y="378" fill="#6B6560" font-size="10" font-family="system-ui">5%</text>

  <text x="740" y="430" fill="#9B9490" font-size="9" font-family="system-ui">428 students · Term 2 mid-point</text>

  <!-- Recent attendance table -->
  <rect x="256" y="464" width="840" height="212" rx="10" fill="#FFFCF8" filter="url(#card-shadow)"/>
  <text x="272" y="490" fill="#1C1714" font-size="13" font-weight="700" font-family="system-ui">Today's Attendance — Class 6A</text>
  <text x="1076" y="490" fill="#CF6A3C" font-size="10" font-weight="600" font-family="system-ui" text-anchor="end">View all classes →</text>
  <!-- Table header -->
  <rect x="256" y="498" width="840" height="24" fill="#F5F0E8"/>
  <text x="280" y="514" fill="#6B6560" font-size="10" font-weight="600" font-family="system-ui">STUDENT</text>
  <text x="480" y="514" fill="#6B6560" font-size="10" font-weight="600" font-family="system-ui">CLASS</text>
  <text x="580" y="514" fill="#6B6560" font-size="10" font-weight="600" font-family="system-ui">STATUS</text>
  <text x="720" y="514" fill="#6B6560" font-size="10" font-weight="600" font-family="system-ui">TIME IN</text>
  <text x="880" y="514" fill="#6B6560" font-size="10" font-weight="600" font-family="system-ui">PARENT NOTIFIED</text>
  <!-- Row 1 -->
  <line x1="256" y1="522" x2="1096" y2="522" stroke="#E8E4DC" stroke-width="1"/>
  <circle cx="278" cy="540" r="10" fill="#CF6A3C" opacity="0.5"/>
  <text x="278" y="544" fill="#FFFCF8" font-size="8" font-weight="700" font-family="system-ui" text-anchor="middle">AK</text>
  <text x="296" y="540" fill="#1C1714" font-size="11" font-family="system-ui">Amara Kofi</text>
  <text x="480" y="540" fill="#1C1714" font-size="11" font-family="system-ui">Class 6A</text>
  <rect x="580" y="530" width="52" height="16" rx="8" fill="rgba(40,202,66,0.15)"/>
  <text x="606" y="541" fill="#28CA42" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Present</text>
  <text x="720" y="540" fill="#1C1714" font-size="11" font-family="system-ui">7:42 AM</text>
  <rect x="880" y="530" width="16" height="16" rx="8" fill="rgba(40,202,66,0.15)"/>
  <text x="888" y="541" fill="#28CA42" font-size="9" font-family="system-ui" text-anchor="middle">✓</text>
  <!-- Row 2 -->
  <line x1="256" y1="556" x2="1096" y2="556" stroke="#E8E4DC" stroke-width="1"/>
  <circle cx="278" cy="574" r="10" fill="#7B6ABA" opacity="0.5"/>
  <text x="278" y="578" fill="#FFFCF8" font-size="8" font-weight="700" font-family="system-ui" text-anchor="middle">SB</text>
  <text x="296" y="574" fill="#1C1714" font-size="11" font-family="system-ui">Sofia Boateng</text>
  <text x="480" y="574" fill="#1C1714" font-size="11" font-family="system-ui">Class 6A</text>
  <rect x="580" y="564" width="44" height="16" rx="8" fill="rgba(255,96,88,0.12)"/>
  <text x="602" y="575" fill="#FF6058" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Absent</text>
  <text x="720" y="574" fill="#9B9490" font-size="11" font-family="system-ui">—</text>
  <rect x="880" y="564" width="68" height="16" rx="8" fill="rgba(207,106,60,0.12)"/>
  <text x="914" y="575" fill="#CF6A3C" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Sending…</text>
  <!-- Row 3 -->
  <line x1="256" y1="590" x2="1096" y2="590" stroke="#E8E4DC" stroke-width="1"/>
  <circle cx="278" cy="608" r="10" fill="#28CA42" opacity="0.4"/>
  <text x="278" y="612" fill="#FFFCF8" font-size="8" font-weight="700" font-family="system-ui" text-anchor="middle">KA</text>
  <text x="296" y="608" fill="#1C1714" font-size="11" font-family="system-ui">Kwame Asante</text>
  <text x="480" y="608" fill="#1C1714" font-size="11" font-family="system-ui">Class 6A</text>
  <rect x="580" y="598" width="52" height="16" rx="8" fill="rgba(40,202,66,0.15)"/>
  <text x="606" y="609" fill="#28CA42" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Present</text>
  <text x="720" y="608" fill="#1C1714" font-size="11" font-family="system-ui">7:55 AM</text>
  <rect x="880" y="598" width="16" height="16" rx="8" fill="rgba(40,202,66,0.15)"/>
  <text x="888" y="609" fill="#28CA42" font-size="9" font-family="system-ui" text-anchor="middle">✓</text>
  <!-- Row 4 -->
  <line x1="256" y1="624" x2="1096" y2="624" stroke="#E8E4DC" stroke-width="1"/>
  <circle cx="278" cy="642" r="10" fill="#FFBD2E" opacity="0.5"/>
  <text x="278" y="646" fill="#FFFCF8" font-size="8" font-weight="700" font-family="system-ui" text-anchor="middle">EO</text>
  <text x="296" y="642" fill="#1C1714" font-size="11" font-family="system-ui">Esi Osei</text>
  <text x="480" y="642" fill="#1C1714" font-size="11" font-family="system-ui">Class 6A</text>
  <rect x="580" y="632" width="52" height="16" rx="8" fill="rgba(255,189,46,0.15)"/>
  <text x="606" y="643" fill="#B88A00" font-size="9" font-weight="600" font-family="system-ui" text-anchor="middle">Late</text>
  <text x="720" y="642" fill="#1C1714" font-size="11" font-family="system-ui">8:21 AM</text>
  <rect x="880" y="632" width="16" height="16" rx="8" fill="rgba(40,202,66,0.15)"/>
  <text x="888" y="643" fill="#28CA42" font-size="9" font-family="system-ui" text-anchor="middle">✓</text>
</svg>
