<?php

// Training guide — only accessible with ?opn=1

if (!isset($_GET['opn']) || $_GET['opn'] !== '1') {

    http_response_code(404);

    exit;

}

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>EduTrack PRO — School Training Guide</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<style>

  :root {

    --primary: #4f46e5;

    --primary-lt: #eef2ff;

    --accent: #06b6d4;

    --success: #16a34a;

    --warning: #d97706;

    --danger: #dc2626;

    --muted: #64748b;

    --border: #e2e8f0;

    --bg: #f8fafc;

    --card: #ffffff;

    --sidebar-w: 270px;

  }

  * { box-sizing: border-box; }

  body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: #1e293b; margin: 0; }



  /* ── Top bar ────────────────────────────────────────────── */

  #top-bar {

    background: var(--primary); color: #fff;

    padding: .75rem 1.5rem; display: flex; align-items: center;

    justify-content: space-between; position: sticky; top: 0; z-index: 100;

    box-shadow: 0 2px 8px rgba(79,70,229,.3);

  }

  #top-bar h1 { font-size: 1.1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; }

  #top-bar .top-actions { display: flex; gap: .5rem; }

  .btn-print {

    background: rgba(255,255,255,.15); border: 1.5px solid rgba(255,255,255,.4);

    color: #fff; padding: .3rem .9rem; border-radius: 8px; font-size: .82rem;

    cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;

  }

  .btn-print:hover { background: rgba(255,255,255,.25); color: #fff; }



  /* ── Layout ─────────────────────────────────────────────── */

  #guide-wrap { display: flex; min-height: calc(100vh - 52px); }



  /* ── Sidebar ────────────────────────────────────────────── */

  #guide-nav {

    width: var(--sidebar-w); background: var(--card); border-right: 1px solid var(--border);

    position: sticky; top: 52px; height: calc(100vh - 52px);

    overflow-y: auto; padding: 1rem 0; flex-shrink: 0;

  }

  #guide-nav .nav-section { font-size: .68rem; font-weight: 700; color: var(--muted);

    text-transform: uppercase; letter-spacing: .07em; padding: .8rem 1.2rem .3rem; }

  #guide-nav a {

    display: flex; align-items: center; gap: .55rem;

    padding: .45rem 1.2rem; font-size: .84rem; color: #374151;

    text-decoration: none; border-left: 3px solid transparent;

    transition: all .15s;

  }

  #guide-nav a:hover { background: var(--primary-lt); color: var(--primary); }

  #guide-nav a.active { background: var(--primary-lt); color: var(--primary); border-left-color: var(--primary); font-weight: 600; }

  #guide-nav a i { width: 16px; text-align: center; font-size: .85rem; }



  /* ── Main content ───────────────────────────────────────── */

  #guide-content { flex: 1; padding: 2rem 2.5rem; max-width: 860px; }



  /* ── Section ────────────────────────────────────────────── */

  .guide-section { margin-bottom: 3rem; scroll-margin-top: 70px; }

  .guide-section h2 {

    font-size: 1.35rem; font-weight: 700; color: var(--primary);

    border-bottom: 2px solid var(--primary-lt); padding-bottom: .5rem; margin-bottom: 1.25rem;

    display: flex; align-items: center; gap: .55rem;

  }

  .guide-section h3 { font-size: 1.05rem; font-weight: 700; color: #1e293b; margin: 1.4rem 0 .75rem; }



  /* ── Role badges ────────────────────────────────────────── */

  .role-badge {

    display: inline-flex; align-items: center; gap: .3rem;

    padding: .18rem .65rem; border-radius: 99px; font-size: .72rem;

    font-weight: 700; letter-spacing: .02em; margin-right: .25rem;

  }

  .rb-admin       { background: #f0fdf4; color: #15803d; border: 1px solid #86efac; }

  .rb-accountant  { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; }

  .rb-headteacher { background: #fdf4ff; color: #7e22ce; border: 1px solid #d8b4fe; }

  .rb-teacher     { background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; }

  .rb-parent      { background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; }

  .rb-cashier     { background: #fefce8; color: #a16207; border: 1px solid #fde68a; }

  .rb-registrar   { background: #fdf2f8; color: #9d174d; border: 1px solid #f9a8d4; }

  .rb-all         { background: #f8fafc; color: #475569; border: 1px solid #cbd5e1; }



  /* ── Step ──────────────────────────────────────────────── */

  .steps { list-style: none; padding: 0; margin: 0; }

  .steps li {

    display: flex; gap: 1rem; margin-bottom: 1rem;

    background: var(--card); border: 1px solid var(--border);

    border-radius: 10px; padding: .85rem 1rem;

    box-shadow: 0 1px 3px rgba(0,0,0,.04);

  }

  .step-num {

    width: 28px; height: 28px; border-radius: 50%;

    background: var(--primary); color: #fff;

    font-size: .8rem; font-weight: 700;

    display: flex; align-items: center; justify-content: center;

    flex-shrink: 0; margin-top: 1px;

  }

  .step-body { flex: 1; }

  .step-action { font-weight: 700; font-size: .92rem; margin-bottom: .25rem; color: #1e293b; }

  .step-body p { font-size: .88rem; color: #374151; margin: .25rem 0 0; line-height: 1.55; }

  .step-body .say {

    background: #f0fdf4; border-left: 3px solid var(--success);

    border-radius: 0 6px 6px 0; padding: .45rem .75rem;

    font-size: .85rem; color: #166534; font-style: italic; margin-top: .5rem;

  }

  .step-body .say::before { content: "Say: "; font-weight: 700; font-style: normal; }

  .step-body .click {

    background: #eff6ff; border-left: 3px solid var(--accent);

    border-radius: 0 6px 6px 0; padding: .45rem .75rem;

    font-size: .85rem; color: #0e7490; margin-top: .5rem;

  }

  .step-body .click::before { content: "Click: "; font-weight: 700; }



  /* ── Callouts ──────────────────────────────────────────── */

  .callout {

    border-radius: 8px; padding: .75rem 1rem; margin: .75rem 0;

    font-size: .87rem; display: flex; gap: .6rem; align-items: flex-start;

    line-height: 1.5;

  }

  .callout i { margin-top: 2px; flex-shrink: 0; }

  .tip     { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

  .note    { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

  .warn    { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

  .success-box { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }



  /* ── Nav path ──────────────────────────────────────────── */

  .nav-path {

    background: var(--bg); border: 1px solid var(--border);

    border-radius: 8px; padding: .5rem .9rem;

    font-size: .82rem; color: var(--muted); margin-bottom: 1rem;

    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;

  }

  .nav-path strong { color: var(--primary); }

  .nav-path .arrow { color: #94a3b8; font-size: .7rem; }



  /* ── Screenshot mock ───────────────────────────────────── */

  .screen-hint {

    background: #1e293b; color: #e2e8f0; border-radius: 10px;

    padding: 1rem 1.2rem; font-size: .82rem; font-family: monospace;

    margin: .75rem 0; line-height: 1.7;

  }

  .screen-hint .hl { color: #fbbf24; font-weight: 700; }

  .screen-hint .btn-mock {

    background: var(--primary); color: #fff; padding: 2px 8px; border-radius: 4px;

    font-size: .78rem; font-family: inherit;

  }

  .screen-hint .link-mock { color: #67e8f9; text-decoration: underline; }



  /* ── Summary table ─────────────────────────────────────── */

  .quick-ref { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; }

  .quick-ref th { background: var(--primary-lt); color: var(--primary); padding: .5rem .75rem; text-align: left; font-weight: 700; }

  .quick-ref td { padding: .5rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }

  .quick-ref tr:last-child td { border-bottom: none; }



  /* ── Print ─────────────────────────────────────────────── */

  @media print {

    #top-bar .top-actions, #guide-nav { display: none !important; }

    #guide-content { max-width: 100%; padding: 1rem; }

    #guide-wrap { display: block; }

    .guide-section { break-inside: avoid; }

  }



  /* ── Scrollbar ─────────────────────────────────────────── */

  #guide-nav::-webkit-scrollbar { width: 4px; }

  #guide-nav::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }

  @media (max-width: 768px) {

    #guide-nav { display: none; }

    #guide-content { padding: 1.25rem; }

  }

</style>

</head>

<body>



<!-- ── Top Bar ─────────────────────────────────────────────────── -->

<div id="top-bar">

  <h1><i class="fas fa-chalkboard-teacher"></i> EduTrack PRO — School Training Guide</h1>

  <div class="top-actions">

    <a href="javascript:window.print()" class="btn-print"><i class="fas fa-print"></i> Print</a>

  </div>

</div>



<div id="guide-wrap">



<!-- ── Sidebar Nav ─────────────────────────────────────────────── -->

<nav id="guide-nav">

  <div class="nav-section">Overview</div>

  <a href="#sec-intro"     class="active"><i class="fas fa-info-circle"></i> Introduction</a>

  <a href="#sec-roles">    <i class="fas fa-users-cog"></i> User Roles</a>

  <a href="#sec-login">    <i class="fas fa-sign-in-alt"></i> Logging In</a>



  <div class="nav-section">Admin Setup</div>

  <a href="#sec-settings"> <i class="fas fa-cog"></i> System Settings</a>

  <a href="#sec-users">    <i class="fas fa-user-plus"></i> Creating Users</a>

  <a href="#sec-classes">  <i class="fas fa-layer-group"></i> Classes & Subjects</a>



  <div class="nav-section">Daily Operations</div>

  <a href="#sec-students"> <i class="fas fa-user-graduate"></i> Students</a>

  <a href="#sec-fees">     <i class="fas fa-money-bill-wave"></i> Fee Collection</a>

  <a href="#sec-express">  <i class="fas fa-qrcode"></i> Express Collection</a>

  <a href="#sec-attendance"><i class="fas fa-user-check"></i> Attendance</a>

  <a href="#sec-marks">    <i class="fas fa-star"></i> Marks & Scores</a>



  <div class="nav-section">Portals</div>

  <a href="#sec-teacher">  <i class="fas fa-chalkboard-teacher"></i> Teacher Portal</a>

  <a href="#sec-parent">   <i class="fas fa-mobile-alt"></i> Parent Portal</a>



  <div class="nav-section">Advanced</div>

  <a href="#sec-reports">  <i class="fas fa-chart-bar"></i> Reports</a>

  <a href="#sec-ai">       <i class="fas fa-robot"></i> AI Features</a>

  <a href="#sec-comms">    <i class="fas fa-sms"></i> Communication</a>

  <a href="#sec-canteen">  <i class="fas fa-utensils"></i> Canteen Module</a>

  <a href="#sec-tips">     <i class="fas fa-lightbulb"></i> Trainer Tips</a>

</nav>



<!-- ── Main Content ─────────────────────────────────────────────── -->

<main id="guide-content">



<!-- ═══════════════════════════════════════════════════════════════

     INTRODUCTION

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-intro">

  <h2><i class="fas fa-info-circle"></i> Introduction</h2>



  <div class="callout note">

    <i class="fas fa-book-open"></i>

    <div>This guide is for <strong>ORIC Network trainers</strong> visiting schools. Follow each section in order during the first training session. Use the sidebar to jump to any module. Each step tells you exactly what to say, where to click, and what to watch for.</div>

  </div>



  <h3>Before You Arrive</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Confirm server access</div>

        <p>Make sure the school's EduTrack server is running (XAMPP green, Apache + MySQL active) or the hosted URL is live. Test it on your phone before the session begins.</p>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Prepare demo data</div>

        <p>Have at least 5 dummy students added, 2 fee types created, and the academic year set correctly. Training with real-looking data is far more effective.</p>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Identify your audience</div>

        <p>Ask: <em>Who is in the room?</em> — Head teacher, accountant, class teachers? Prioritise the sections most relevant to those present. Don't rush through modules they won't use daily.</p>

        <div class="say">Today we're going to walk through EduTrack together. By the end of this session, each of you will know exactly what to do every morning when you sit down.</div>

      </div>

    </li>

  </ul>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     USER ROLES

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-roles">

  <h2><i class="fas fa-users-cog"></i> User Roles</h2>

  <p style="font-size:.9rem;color:var(--muted);">Explain this before creating any accounts. Every person in the school gets the role that matches their job — no more, no less.</p>



  <table class="quick-ref">

    <thead><tr><th>Role</th><th>Who Gets It</th><th>What They Can Do</th></tr></thead>

    <tbody>

      <tr>

        <td><span class="role-badge rb-admin">Admin</span></td>

        <td>ICT officer, owner/director</td>

        <td>Everything — all modules, all settings, create users</td>

      </tr>

      <tr>

        <td><span class="role-badge rb-headteacher">Headteacher</span></td>

        <td>Head teacher, deputy head, supervisor</td>

        <td>All academic modules, reports, timetable — cannot delete system data</td>

      </tr>

      <tr>

        <td><span class="role-badge rb-accountant">Accountant</span></td>

        <td>School accountant, bursar</td>

        <td>Fees, expenses, financial reports, AI analytics</td>

      </tr>

      <tr>

        <td><span class="role-badge rb-cashier">Cashier</span></td>

        <td>Fee collection desk officer</td>

        <td>Record payments, express collection — cannot see full financial history</td>

      </tr>

      <tr>

        <td><span class="role-badge rb-registrar">Registrar</span></td>

        <td>Admissions officer</td>

        <td>Add/edit students and staff profiles, parent accounts</td>

      </tr>

      <tr>

        <td><span class="role-badge rb-teacher">Tutor</span></td>

        <td>Class teacher / subject teacher</td>

        <td>Teacher Portal: attendance, marks, homework, lesson plans</td>

      </tr>

    </tbody>

  </table>



  <div class="callout tip">

    <i class="fas fa-lightbulb"></i>

    <div><strong>Training tip:</strong> Point at each person in the room and say their role out loud. "You are the Accountant — you'll use Fees every day. You are the Headteacher — you'll use Reports and AI Analytics."</div>

  </div>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     LOGGING IN

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-login">

  <h2><i class="fas fa-sign-in-alt"></i> Logging In</h2>

  <span class="role-badge rb-all">All Users</span>



  <div class="nav-path">

    <strong>Open browser</strong>

    <span class="arrow">›</span>

    Type the school URL

    <span class="arrow">›</span>

    <strong>Login page loads automatically</strong>

  </div>



  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Open the browser and go to the school URL</div>

        <p>On a computer, type the URL in Chrome or Edge. On a phone, use Chrome. Safari works but Chrome is recommended.</p>

        <div class="say">The system works on any device — computer, tablet, or phone. You don't need to install anything.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Enter username and password</div>

        <p>Username is usually the person's first name in lowercase (e.g. <code>kwame</code> or <code>abena</code>). The admin sets this during user creation.</p>

        <div class="click">Username field → type username. Password field → type password. Click <strong>Login</strong> button (blue button).</div>

        <div class="callout warn" style="margin-top:.6rem;">

          <i class="fas fa-exclamation-triangle"></i>

          <div>If they see "Invalid credentials", check if Caps Lock is on. Passwords are case-sensitive.</div>

        </div>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Dashboard loads — orient them immediately</div>

        <p>Point to the left sidebar and say:</p>

        <div class="say">This left panel is your menu. Everything you need is here. The modules you see depend on your role — so each person's menu may look slightly different.</div>

        <p>Point to the top-right corner: their name is shown there. Click it to log out or change settings.</p>

      </div>

    </li>

  </ul>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     SYSTEM SETTINGS

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-settings">

  <h2><i class="fas fa-cog"></i> System Settings</h2>

  <span class="role-badge rb-admin">Admin</span>

  <span style="font-size:.82rem;color:var(--muted);margin-left:.3rem;">Do this first, before anything else.</span>



  <div class="nav-path">

    <strong>Sidebar</strong> <span class="arrow">›</span> <strong>Settings</strong>

  </div>



  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Set the school name and logo</div>

        <p>Scroll to the <strong>School Information</strong> section. Fill in: school name, address, phone, motto. Upload the school logo (PNG or JPG, square works best).</p>

        <div class="click">Settings → School Information → fill fields → click <strong>Save Settings</strong>.</div>

        <div class="say">Your school name will appear on all reports, receipts, and the parent portal. Make sure it's spelled exactly as it appears on your official documents.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Set the Academic Year and Current Term</div>

        <p>Find <strong>Academic Year</strong> (e.g. <code>2024/2025</code>) and <strong>Current Term</strong> (Term 1, 2, or 3). These affect which fees, marks, and reports are shown by default.</p>

        <div class="click">Settings → Academic Settings → set Academic Year and Term → <strong>Save</strong>.</div>

        <div class="callout warn">

          <i class="fas fa-exclamation-triangle"></i>

          <div>If the term is wrong, fees recorded will be filed under the wrong term and reports will show incorrect data. Always confirm this with the head teacher before training.</div>

        </div>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Set the currency symbol</div>

        <p>EduTrack defaults to Ghana Cedis (₵). If the school uses a different currency, update it in Settings → Currency.</p>

      </div>

    </li>

    <li>

      <div class="step-num">4</div>

      <div class="step-body">

        <div class="step-action">Configure SMS (Hubtel) — if school uses SMS</div>

        <p>Under <strong>SMS Settings</strong>, enter the Hubtel Client ID and Client Secret. Test by sending a message to yourself.</p>

        <div class="click">Settings → SMS Settings → enter credentials → click <strong>Send Test SMS</strong> → verify on your phone.</div>

        <div class="say">SMS notifications go to parents automatically when fees are paid or when attendance is marked absent. You don't have to do anything extra — it's automatic.</div>

      </div>

    </li>

  </ul>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     CREATING USERS

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-users">

  <h2><i class="fas fa-user-plus"></i> Creating Users</h2>

  <span class="role-badge rb-admin">Admin</span>



  <div class="nav-path">

    <strong>Sidebar</strong> <span class="arrow">›</span> <strong>User Management</strong> <span class="arrow">›</span> <strong>Add User</strong>

  </div>



  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Go to User Management</div>

        <p>Click <strong>User Management</strong> in the sidebar. You'll see a table of all existing users.</p>

        <div class="click">Click the green <strong>+ Add User</strong> button (top-right of the page).</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Fill in the user details</div>

        <p>Required fields: <strong>Full Name</strong>, <strong>Username</strong> (no spaces, lowercase), <strong>Password</strong>, <strong>Role</strong>. Email and phone are optional but useful for password recovery.</p>

        <div class="say">Choose a simple first-time password, then ask the user to change it after their first login. Something like "school123" for the initial setup.</div>

        <div class="callout tip">

          <i class="fas fa-lightbulb"></i>

          <div>Usernames must be unique. If "kwame" is taken, try "kwame.asante" or "kwame2".</div>

        </div>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Assign the correct role</div>

        <p>This is the most important field. Refer to the roles table above. A wrong role means the user sees too much or too little.</p>

        <div class="click">Role dropdown → select role → click <strong>Save User</strong>.</div>

      </div>

    </li>

    <li>

      <div class="step-num">4</div>

      <div class="step-body">

        <div class="step-action">Link teachers to their staff profile (for Teacher Portal access)</div>

        <p>After creating a user with the <strong>Tutor</strong> role, go to <strong>Staff</strong> in the sidebar, find the teacher's staff record, and click <strong>Reset Teacher Login</strong>. This links the user account to the staff record so the teacher can access the Teacher Portal.</p>

        <div class="click">Sidebar → Staff → find teacher → open profile → click <strong>Reset Teacher Login</strong> → confirm.</div>

        <div class="callout warn">

          <i class="fas fa-exclamation-triangle"></i>

          <div>If you skip this step, the teacher will get an error when trying to log into the Teacher Portal ("not linked to a staff record").</div>

        </div>

      </div>

    </li>

  </ul>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     CLASSES & SUBJECTS

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-classes">

  <h2><i class="fas fa-layer-group"></i> Classes &amp; Subjects</h2>

  <span class="role-badge rb-admin">Admin</span>

  <span class="role-badge rb-headteacher">Headteacher</span>



  <h3>Setting Up Classes</h3>

  <div class="nav-path">

    <strong>Sidebar</strong> <span class="arrow">›</span> <strong>Classes</strong>

  </div>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Add each class</div>

        <p>Click <strong>Add Class</strong>. Enter the class name exactly as the school uses it (e.g. <em>Basic 1</em>, <em>JHS 2B</em>, <em>Form 3</em>). This name appears throughout the system — be consistent.</p>

        <div class="say">Whatever name you type here will appear on report cards, fee receipts, and SMS messages. Agree on the naming convention with the head teacher now.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Assign a class teacher</div>

        <p>In the class form, select the class teacher from the dropdown. This is the teacher who takes daily attendance for that class.</p>

      </div>

    </li>

  </ul>



  <h3>Setting Up Subjects</h3>

  <div class="nav-path">

    <strong>Sidebar</strong> <span class="arrow">›</span> <strong>Subjects</strong>

  </div>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Add each subject</div>

        <p>Click <strong>Add Subject</strong>. Enter subject name, a short code (e.g. <code>MATH</code>, <code>ENG</code>), and select which classes offer this subject.</p>

        <div class="click">Subjects page → <strong>+ Add Subject</strong> → fill Name, Code → select classes in the "Assign to Classes" multi-select → <strong>Save</strong>.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Assign subject teachers</div>

        <p>After adding subjects, go to <strong>Staff</strong>, open each teacher's profile, and assign them the subjects they teach. This is what determines which marks a teacher can enter in the Teacher Portal.</p>

      </div>

    </li>

  </ul>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     STUDENTS

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-students">

  <h2><i class="fas fa-user-graduate"></i> Students</h2>

  <span class="role-badge rb-admin">Admin</span>

  <span class="role-badge rb-registrar">Registrar</span>



  <div class="nav-path">

    <strong>Sidebar</strong> <span class="arrow">›</span> <strong>Students</strong>

  </div>



  <h3>Adding a New Student</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Click "Add Student"</div>

        <div class="click">Students page → <strong>+ Add Student</strong> button (top-right).</div>

        <div class="say">We add every student here. Once added, their name appears in attendance, fees, marks — everywhere. We only add them once.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Fill in required fields</div>

        <p>Required: <strong>First Name</strong>, <strong>Last Name</strong>, <strong>Class</strong>, <strong>Student ID</strong> (the school's existing ID number). Recommended: parent phone number, parent name, student photo.</p>

        <div class="callout tip">

          <i class="fas fa-lightbulb"></i>

          <div>The parent phone number is critical if the school uses SMS — absent notifications and payment receipts go to this number. Collect it during enrollment.</div>

        </div>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Upload a student photo</div>

        <p>Click the photo area to upload. A passport photo works well. The photo appears in the Teacher Portal, parent portal, and on ID cards.</p>

        <div class="click">Click the circle/photo area → browse and select file → <strong>Save Student</strong>.</div>

      </div>

    </li>

    <li>

      <div class="step-num">4</div>

      <div class="step-body">

        <div class="step-action">Bulk import existing students</div>

        <p>If the school already has students in Excel, use the <strong>Import Students</strong> button. Download the CSV template first, fill it in, then upload. This saves hours of manual entry.</p>

        <div class="click">Students page → <strong>Import</strong> → <strong>Download Template</strong> → fill in Excel → save as CSV → upload file → <strong>Import</strong>.</div>

        <div class="say">If your school already has a list in Excel, we can import all students in one go — you don't have to type them one by one.</div>

      </div>

    </li>

  </ul>



  <h3>Searching and Viewing Students</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Use the search bar to find any student instantly</div>

        <p>Type part of the name or student ID. Results update as you type. Click a student row to open their full profile.</p>

        <div class="say">You never have to scroll through a long list. Just start typing the name and it appears.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Filter by class</div>

        <p>Use the <strong>Class</strong> dropdown above the table to show only one class. This is useful for class teachers reviewing their own class.</p>

      </div>

    </li>

  </ul>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     FEE COLLECTION

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-fees">

  <h2><i class="fas fa-money-bill-wave"></i> Fee Collection</h2>

  <span class="role-badge rb-accountant">Accountant</span>

  <span class="role-badge rb-cashier">Cashier</span>



  <div class="nav-path">

    <strong>Sidebar</strong> <span class="arrow">›</span> <strong>Fees &amp; Payments</strong>

  </div>



  <h3>Step 1 — Set Up Fee Types (First Time Only)</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Go to Fee Types / Fee Structures</div>

        <p>Before collecting any money, the types of fees must be created — e.g. <em>School Fees</em>, <em>Feeding Fees</em>, <em>PTA Levy</em>, <em>Exam Fees</em>.</p>

        <div class="click">Fees page → <strong>Fee Types</strong> tab → <strong>+ Add Fee Type</strong>.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Create fee structures per class</div>

        <p>A fee structure links a fee type to a class and sets the amount. E.g. "School Fees — Basic 1 — GHS 400 — Term 1 2025".</p>

        <div class="say">Different classes may pay different amounts. We set it up once per term and the system remembers it for every student in that class.</div>

      </div>

    </li>

  </ul>



  <h3>Step 2 — Recording a Payment</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Search for the student</div>

        <div class="click">Fees page → type student name or ID in the search box → select the student from results.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Select the fee type and enter the amount</div>

        <p>Dropdown shows available fees for this student's class. The expected amount pre-fills — change it only if the student is paying partially.</p>

        <div class="click">Fee Type dropdown → select → Amount field (pre-filled) → Payment Method (Cash / Mobile Money / Bank Transfer).</div>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Click "Record Payment" and print receipt</div>

        <div class="click">Click <strong>Record Payment</strong> → a receipt appears in a pop-up → click <strong>Print Receipt</strong> or <strong>Download PDF</strong>.</div>

        <div class="say">The receipt has the school name, student name, amount, date, and a unique receipt number. An SMS is also sent to the parent's phone automatically — if SMS is set up.</div>

      </div>

    </li>

    <li>

      <div class="step-num">4</div>

      <div class="step-body">

        <div class="step-action">View payment history for any student</div>

        <p>Click a student's name from the fees table to see all their past payments, outstanding balance, and a payment timeline.</p>

      </div>

    </li>

  </ul>



  <div class="callout tip">

    <i class="fas fa-lightbulb"></i>

    <div><strong>Partial payments:</strong> If a parent pays GHS 200 of a GHS 400 fee, enter GHS 200. The system calculates the outstanding balance automatically. The next time they pay, enter the remaining amount.</div>

  </div>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     EXPRESS COLLECTION (QR)

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-express">

  <h2><i class="fas fa-qrcode"></i> Express Fee Collection (QR Scanner)</h2>

  <span class="role-badge rb-cashier">Cashier</span>

  <span class="role-badge rb-accountant">Accountant</span>



  <div class="nav-path">

    <strong>Sidebar</strong> <span class="arrow">›</span> <strong>Express Collection</strong>

  </div>



  <div class="callout note">

    <i class="fas fa-bolt"></i>

    <div>Express Collection eliminates the slow manual search. Instead of typing the student name, the cashier scans the student's QR code from their phone or ID card and the student record appears instantly.</div>

  </div>



  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Open Express Collection on the cashier's device</div>

        <div class="click">Sidebar → <strong>Express Collection</strong>. The camera viewfinder opens automatically on a phone or tablet.</div>

        <div class="say">This page is designed to be used on a phone or tablet at the fee desk. The camera opens and you just scan — no typing required.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Scan the student's QR code</div>

        <p>Point the camera at the QR code on the student's phone (Parent Portal → Fee Desk Pass) or printed ID card. The student record appears within 1 second.</p>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Tap the fee button and record payment</div>

        <p>Outstanding fees appear as large tap buttons — feeding fees are highlighted in green. Tap the fee, confirm the amount, select payment method, and tap <strong>Record Payment</strong>.</p>

        <div class="say">The whole process takes about 10 seconds per student instead of 45 seconds. During a busy morning with 200 students paying, this saves over 2 hours.</div>

      </div>

    </li>

    <li>

      <div class="step-num">4</div>

      <div class="step-body">

        <div class="step-action">Use the 5-digit ID fallback if QR won't scan</div>

        <p>At the bottom of the Express Collection page is a number input: <strong>"Or enter 5-digit Student ID"</strong>. Type the last 5 digits of the student ID as a backup — works even without a camera.</p>

      </div>

    </li>

  </ul>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     ATTENDANCE

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-attendance">

  <h2><i class="fas fa-user-check"></i> Attendance</h2>

  <span class="role-badge rb-teacher">Tutor</span>

  <span class="role-badge rb-admin">Admin</span>

  <span class="role-badge rb-headteacher">Headteacher</span>



  <div class="nav-path">

    <strong>Sidebar</strong> <span class="arrow">›</span> <strong>Attendance</strong>

    <span style="font-size:.75rem;color:var(--muted);margin-left:.5rem;">(or via Teacher Portal for tutors)</span>

  </div>



  <h3>Taking Daily Attendance</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Select the class and date</div>

        <div class="click">Attendance page → <strong>Class</strong> dropdown → select class → confirm date (defaults to today).</div>

        <p>The student list for that class loads automatically.</p>

        <div class="say">Every morning, the class teacher opens this and marks who is present before classes begin. It takes about 2 minutes for a class of 40.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Mark each student's status</div>

        <p>For each student, tap or click: <strong>Present</strong> (green), <strong>Absent</strong> (red), <strong>Late</strong> (orange), or <strong>Excused</strong> (blue).</p>

        <div class="click"><strong>Mark All Present</strong> button → then change only the absent/late students. This is much faster than marking each student individually.</div>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Save attendance</div>

        <div class="click">Click <strong>Save Attendance</strong> (blue button, bottom of page).</div>

        <p>A green confirmation appears. If SMS is enabled, parents of absent students receive an automatic text message.</p>

        <div class="say">Parents get an SMS the moment you save — it says "Your child [Name] was absent today. Please contact the school." You don't need to call anyone manually.</div>

      </div>

    </li>

    <li>

      <div class="step-num">4</div>

      <div class="step-body">

        <div class="step-action">View attendance reports</div>

        <div class="click">Attendance page → <strong>Reports</strong> tab → filter by class, date range, or student name.</div>

        <p>You can see which students are consistently late or absent. This feeds into the AI at-risk analysis.</p>

      </div>

    </li>

  </ul>



  <div class="callout warn">

    <i class="fas fa-exclamation-triangle"></i>

    <div>Attendance can only be taken for <strong>today or past dates</strong> — never future dates. If a teacher forgets to take attendance, they can still go back and record it for a previous date.</div>

  </div>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     MARKS & SCORES

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-marks">

  <h2><i class="fas fa-star"></i> Marks &amp; Scores</h2>

  <span class="role-badge rb-teacher">Tutor</span>

  <span class="role-badge rb-headteacher">Headteacher</span>

  <span class="role-badge rb-admin">Admin</span>



  <div class="nav-path">

    <strong>Teacher Portal</strong> <span class="arrow">›</span> <strong>Marks tab</strong>

    <span style="color:#94a3b8;margin:0 .3rem;">·</span>

    or

    <span style="margin-left:.3rem;"><strong>Main system</strong> <span class="arrow">›</span> Terminal Reports</span>

  </div>



  <h3>Entering Scores (Teacher Portal)</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Open Teacher Portal and go to Marks</div>

        <div class="click">Go to <code>[school-url]/teacher-portal/</code> → log in → tap <strong>Marks</strong> (star icon in bottom navigation).</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Select class and subject</div>

        <div class="click">Class dropdown (top-left) → select class → Subject dropdown → select subject.</div>

        <p>The full student list for that class and subject appears.</p>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Enter class score and exam score for each student</div>

        <p>For each student there are two fields: <strong>Class Score</strong> (continuous assessment) and <strong>Exam Score</strong>. The system calculates the total automatically using the configured weighting (typically 30% class + 70% exam).</p>

        <div class="say">You don't calculate anything — just type the raw scores. The system adds them up and assigns the grade automatically.</div>

      </div>

    </li>

    <li>

      <div class="step-num">4</div>

      <div class="step-body">

        <div class="step-action">Save All Marks</div>

        <div class="click">Click <strong>Save All Marks</strong> (blue button, bottom). A green confirmation toast appears.</div>

        <div class="callout tip">

          <i class="fas fa-lightbulb"></i>

          <div>Marks can be updated any time before the report is generated. The last saved value is what appears on the terminal report.</div>

        </div>

      </div>

    </li>

  </ul>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     TEACHER PORTAL

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-teacher">

  <h2><i class="fas fa-chalkboard-teacher"></i> Teacher Portal</h2>

  <span class="role-badge rb-teacher">Tutor</span>



  <div class="callout note">

    <i class="fas fa-mobile-alt"></i>

    <div>The Teacher Portal is a <strong>separate app</strong> designed for phones. It lives at <code>[school-url]/teacher-portal/</code>. Teachers log in with the same username and password as the main system. It can be installed as an app on their phone.</div>

  </div>



  <div class="nav-path">

    Open browser → <strong>[school-url]/teacher-portal/</strong> → log in

  </div>



  <h3>Daily Workflow for a Class Teacher</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Install the app on their phone</div>

        <p>When the Teacher Portal loads in Chrome, a banner appears at the top: <em>"Install Teacher Portal for quick access"</em>. Tap <strong>Install</strong>. It adds an icon to the home screen like a regular app.</p>

        <div class="say">You don't need the App Store or Play Store. Just open Chrome, go to the link I'll give you, and install it from there. It works offline too.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Today tab — first thing every morning</div>

        <p>The <strong>Today</strong> tab (home icon, bottom nav) shows: today's lesson schedule, attendance pending for their classes, and homework that needs marking.</p>

        <div class="click">Open Teacher Portal → Today tab is already selected → read the list. If attendance shows "Pending", tap <strong>Take</strong> next to the class name.</div>

        <div class="say">Every morning, the very first thing you do is open the Today tab. It tells you exactly what you need to do today.</div>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Attendance tab — mark students</div>

        <div class="click">Bottom nav → <strong>Attendance</strong> (person + tick icon) → tap <strong>Mark All Present</strong> → change absent/late students → <strong>Save Attendance</strong>.</div>

      </div>

    </li>

    <li>

      <div class="step-num">4</div>

      <div class="step-body">

        <div class="step-action">Marks tab — enter scores</div>

        <div class="click">Bottom nav → <strong>Marks</strong> (star icon) → select class → select subject → enter scores → <strong>Save All Marks</strong>.</div>

      </div>

    </li>

    <li>

      <div class="step-num">5</div>

      <div class="step-body">

        <div class="step-action">More menu — additional features</div>

        <div class="click">Bottom nav → <strong>More</strong> (three dots icon) → choose from: Lesson Plans, Lesson Notes, Homework, My Classes, Notices, Student Support.</div>

      </div>

    </li>

    <li>

      <div class="step-num">6</div>

      <div class="step-body">

        <div class="step-action">Student Support — identify struggling students</div>

        <p>The <strong>Student Support</strong> section (under More) shows students ranked by risk level based on attendance, marks, and homework completion. Students in red (Critical) need the most attention.</p>

        <div class="click">More → <strong>Student Support</strong> → tap any student card → fill in a note in the Intervention form → check <strong>Share with parent</strong> if you want parents to see it → <strong>Save</strong>.</div>

        <div class="say">If a student is falling behind, log a note here. If you tick "Share with parent", the parent will see it in their portal. It keeps everyone on the same page without phone calls.</div>

      </div>

    </li>

    <li>

      <div class="step-num">7</div>

      <div class="step-body">

        <div class="step-action">Assign Homework</div>

        <div class="click">More → <strong>Homework</strong> → <strong>+ Assign</strong> → fill in title, instructions, due date, class, subject → <strong>Save</strong>.</div>

        <p>Students and parents can see homework assignments in the Parent Portal. The teacher can track who submitted and who didn't.</p>

      </div>

    </li>

  </ul>



  <div class="screen-hint">

    Bottom navigation bar:<br>

    <span class="hl">[ Home ] [ Timetable ] [ Attendance ] [ Marks ] [ ··· More ]</span><br><br>

    More drawer contains:<br>

    Lesson Plans · Lesson Notes · Homework · My Classes · Notices · <span class="hl">Student Support</span>

  </div>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     PARENT PORTAL

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-parent">

  <h2><i class="fas fa-mobile-alt"></i> Parent Portal</h2>

  <span class="role-badge rb-parent">Parents</span>

  <span class="role-badge rb-admin">Admin</span>



  <div class="callout note">

    <i class="fas fa-info-circle"></i>

    <div>The Parent Portal is a Progressive Web App — parents open it in their phone browser and can install it like a regular app. It works even without internet (offline) for critical information.</div>

  </div>



  <div class="nav-path">

    Open phone browser → <strong>[school-url]/parent-portal/</strong> → register or log in

  </div>



  <h3>Setting Up Parent Accounts</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Admin creates parent accounts</div>

        <div class="click">Main system sidebar → <strong>Parent Accounts</strong> → <strong>+ Add Parent</strong> → enter parent name, phone number, email → link to student(s).</div>

        <div class="say">We create an account for each parent. They use their phone number to log in — no password needed for the first login, the system sends them a PIN via SMS.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Send parents the portal link</div>

        <p>Share the URL via WhatsApp or SMS: <code>[school-url]/parent-portal/</code>. Parents open it in Chrome on their phone and can install it to their home screen.</p>

        <div class="say">Send this link to all parents on your school WhatsApp group. They open it in Chrome, log in with their phone number, and they can see their child's information immediately.</div>

      </div>

    </li>

  </ul>



  <h3>What Parents See</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Dashboard with live stats</div>

        <p>As soon as a parent logs in, they see: outstanding fees balance, average grade, next exam date, and recent attendance summary — all updated in real time.</p>

        <div class="say">Parents see their child's information as soon as something changes. No waiting for a letter or report — they see it immediately.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Fee Desk QR Code</div>

        <p>The parent portal shows a QR code labelled <strong>"Fee Desk Pass"</strong>. When the parent brings their child to pay fees, the cashier scans this code instead of searching by name.</p>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Attendance and homework</div>

        <p>Parents can see their child's attendance record for the term and any homework assigned by teachers. If a teacher logged an intervention note visible to parents, it also appears here.</p>

      </div>

    </li>

  </ul>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     REPORTS

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-reports">

  <h2><i class="fas fa-chart-bar"></i> Reports</h2>

  <span class="role-badge rb-headteacher">Headteacher</span>

  <span class="role-badge rb-accountant">Accountant</span>

  <span class="role-badge rb-admin">Admin</span>



  <div class="nav-path">

    <strong>Sidebar</strong> <span class="arrow">›</span> <strong>Reports</strong>

  </div>



  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Financial Reports — Fee Collection Summary</div>

        <p>Shows total collected, outstanding balance, and per-class breakdown for any date range. Use this for end-of-term reconciliation.</p>

        <div class="click">Reports → <strong>Financial</strong> tab → set date range → click <strong>Generate</strong> → <strong>Export PDF</strong> or <strong>Export Excel</strong>.</div>

        <div class="say">At the end of every month, the accountant uses this to reconcile. It shows exactly who paid, who owes, and the total collected — broken down by fee type.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Attendance Reports</div>

        <p>Shows daily, weekly, or monthly attendance per class or per student. Highlights students who are frequently absent.</p>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Terminal Reports (Report Cards)</div>

        <div class="nav-path" style="margin-bottom:.5rem;"><strong>Sidebar</strong> <span class="arrow">›</span> <strong>Terminal Reports</strong></div>

        <p>Generate end-of-term report cards for any class. The system pulls all marks entered by teachers and produces a formatted PDF report for each student.</p>

        <div class="click">Terminal Reports → select Class → select Term → click <strong>Generate Reports</strong> → <strong>Print All</strong> (prints all students in one go) or click individual student to print one.</div>

        <div class="say">Teachers enter the marks in the Teacher Portal, and then from here, the head teacher generates the report cards with one click. No more typing individual reports.</div>

      </div>

    </li>

  </ul>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     AI FEATURES

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-ai">

  <h2><i class="fas fa-robot"></i> AI Features</h2>

  <span class="role-badge rb-headteacher">Headteacher</span>

  <span class="role-badge rb-accountant">Accountant</span>

  <span class="role-badge rb-admin">Admin</span>



  <div class="nav-path">

    <strong>Sidebar</strong> <span class="arrow">›</span> <strong>AI Analytics</strong>

    <span style="color:#94a3b8;margin:0 .3rem;">·</span> and

    <strong>RBC AI Agent</strong>

  </div>



  <h3>AI Analytics Dashboard</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">View the 6-month revenue forecast</div>

        <p>The top chart shows predicted fee collection for the next 6 months, based on historical payment patterns. Use this for financial planning.</p>

        <div class="say">This prediction is based on your school's own data — how parents have paid in previous terms. It gets more accurate as the system has more data to learn from.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">View students at risk of late payment</div>

        <p>The table at the bottom lists students whose parents historically pay late. Use this to prioritise collection follow-up calls before fees become overdue.</p>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Retrain the model with fresh data</div>

        <div class="click">AI Analytics page → click <strong>Retrain</strong> button (top-right of the model status card).</div>

        <p>Do this at the start of each new term to include the latest payment data.</p>

      </div>

    </li>

  </ul>



  <h3>RBC AI Agent (Chat Assistant)</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Open the AI chat</div>

        <div class="click">Sidebar → <strong>RBC AI Agent</strong>. A chat interface opens.</div>

        <div class="say">This is like a smart assistant that knows your school data. You can ask it questions or give it tasks in plain English.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Try example commands</div>

        <div class="screen-hint">

          You can type things like:<br>

          <span class="hl">"How many students are in Basic 3?"</span><br>

          <span class="hl">"Which students in JHS 1 have not paid school fees?"</span><br>

          <span class="hl">"Show me today's attendance summary"</span><br>

          <span class="hl">"Send SMS to all parents in Primary 4 about tomorrow's PTA"</span>

        </div>

        <div class="say">You don't need to click through menus for quick questions. Just ask and the system answers immediately.</div>

      </div>

    </li>

  </ul>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     COMMUNICATION

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-comms">

  <h2><i class="fas fa-sms"></i> Communication &amp; Alerts</h2>

  <span class="role-badge rb-headteacher">Headteacher</span>

  <span class="role-badge rb-admin">Admin</span>



  <div class="nav-path">

    <strong>Sidebar</strong> <span class="arrow">›</span> <strong>Communication</strong>

    <span style="color:#94a3b8;margin:0 .3rem;">·</span>

    and <strong>Alerts &amp; SMS</strong>

  </div>



  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Send a bulk SMS to parents</div>

        <div class="click">Sidebar → <strong>Communication</strong> → <strong>Compose Message</strong> → select recipients (All Parents / By Class / Individual) → type message → click <strong>Send SMS</strong>.</div>

        <div class="say">You can send an SMS to all 500 parents in one click. For example, before a school event or when you need to inform parents about a holiday.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Post an announcement for teachers</div>

        <div class="click">Communication → <strong>Announcements</strong> → <strong>+ New Announcement</strong> → type title and body → select audience (All Staff / Teachers Only) → <strong>Post</strong>.</div>

        <p>Teachers see this in the Teacher Portal under <strong>Notices</strong> (bell icon).</p>

      </div>

    </li>

    <li>

      <div class="step-num">3</div>

      <div class="step-body">

        <div class="step-action">Set up automatic alerts</div>

        <div class="click">Sidebar → <strong>Alerts &amp; SMS</strong> → toggle which events trigger automatic SMS (payment received, student absent, overdue fees).</div>

        <p>Once set up, these send automatically — no manual action needed each time.</p>

      </div>

    </li>

  </ul>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     CANTEEN MODULE

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-canteen">

  <h2><i class="fas fa-utensils"></i> Canteen Module</h2>

  <span class="role-badge rb-admin">Admin</span>

  <span class="role-badge rb-cashier">Cashier</span>



  <div class="callout note">

    <i class="fas fa-info-circle"></i>

    <div>The Canteen Module is a paid add-on. If it is not active on the school's plan, the sidebar will not show Canteen menu items. A 30-day free trial can be activated from Settings.</div>

  </div>



  <h3>First-Time Setup</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Complete the onboarding wizard</div>

        <p>On first use, a setup wizard appears automatically. Walk through the 5 steps: welcome, create sessions (Breakfast/Lunch), choose verification method (QR recommended), open scanner, done.</p>

        <div class="click">Sidebar → <strong>Canteen Setup</strong> → follow the wizard → click <strong>Next</strong> on each step.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Generate student identity QR codes</div>

        <div class="click">Sidebar → <strong>Student ID Cards</strong> → click <strong>Generate Missing Identity QR Tokens</strong> → wait for completion.</div>

        <p>This creates a permanent QR code for every student. It only needs to be done once.</p>

      </div>

    </li>

  </ul>



  <h3>Daily Operation</h3>

  <ul class="steps">

    <li>

      <div class="step-num">1</div>

      <div class="step-body">

        <div class="step-action">Canteen window — open the Scanner</div>

        <div class="click">Sidebar → <strong>Canteen Scanner</strong> → enter 4-digit PIN → camera opens.</div>

        <p>Students show their phone (Parent Portal → Canteen Pass) or printed ID. The canteen staff scans it — a confirmation card appears with the student's photo and name.</p>

        <div class="say">The canteen staff just scans. Green screen = confirmed, has a meal. Red screen = not enrolled or already served. The system handles everything — they don't need to check any list.</div>

      </div>

    </li>

    <li>

      <div class="step-num">2</div>

      <div class="step-body">

        <div class="step-action">Cook's Dashboard — the big screen in the kitchen</div>

        <div class="click">Sidebar → <strong>Cook Dashboard</strong> → enter cook PIN.</div>

        <p>Shows a live count of meals confirmed vs enrolled. Updates every 30 seconds. The cook knows exactly how many meals to prepare without phone calls.</p>

      </div>

    </li>

  </ul>

</section>



<!-- ═══════════════════════════════════════════════════════════════

     TRAINER TIPS

═════════════════════════════════════════════════════════════════ -->

<section class="guide-section" id="sec-tips">

  <h2><i class="fas fa-lightbulb"></i> Trainer Tips &amp; Common Questions</h2>



  <h3>Common Questions Schools Ask</h3>



  <ul class="steps">

    <li>

      <div class="step-num"><i class="fas fa-question" style="font-size:.7rem;"></i></div>

      <div class="step-body">

        <div class="step-action">"What if the internet goes down?"</div>

        <p>The Teacher Portal and Parent Portal are Progressive Web Apps — they work offline for core functions. Attendance, viewing student info, and reading notices work offline. Anything that records data (payments, saving marks) requires internet and will sync once connection returns.</p>

        <div class="say">For attendance specifically, if the server is on your local network, it always works even without internet. Payments need the internet.</div>

      </div>

    </li>

    <li>

      <div class="step-num"><i class="fas fa-question" style="font-size:.7rem;"></i></div>

      <div class="step-body">

        <div class="step-action">"A teacher forgot their password, what do we do?"</div>

        <p>An admin goes to <strong>User Management</strong> → finds the user → clicks <strong>Reset Password</strong> → sets a new temporary password → tells the teacher. They can change it themselves after logging in.</p>

      </div>

    </li>

    <li>

      <div class="step-num"><i class="fas fa-question" style="font-size:.7rem;"></i></div>

      <div class="step-body">

        <div class="step-action">"Can two people use the system at the same time?"</div>

        <p>Yes. Multiple staff members can be logged in simultaneously with no conflict. The accountant and cashier can both record payments at the same time.</p>

      </div>

    </li>

    <li>

      <div class="step-num"><i class="fas fa-question" style="font-size:.7rem;"></i></div>

      <div class="step-body">

        <div class="step-action">"How do we move to the next term?"</div>

        <p>At the start of a new term: go to <strong>Settings</strong> → update <strong>Current Term</strong> to Term 2 (or 3). That's it. The system keeps all previous term data — it doesn't delete anything. New fees for the new term are then recorded under the correct term.</p>

      </div>

    </li>

    <li>

      <div class="step-num"><i class="fas fa-question" style="font-size:.7rem;"></i></div>

      <div class="step-body">

        <div class="step-action">"A student was added to the wrong class, how do we fix it?"</div>

        <p>Go to <strong>Students</strong> → search the student → open their profile → click <strong>Edit</strong> → change the <strong>Class</strong> field → <strong>Save</strong>. The change takes effect immediately across all modules.</p>

      </div>

    </li>

    <li>

      <div class="step-num"><i class="fas fa-question" style="font-size:.7rem;"></i></div>

      <div class="step-body">

        <div class="step-action">"How do we handle a student who left the school?"</div>

        <p>Go to <strong>Students</strong> → open the student → click <strong>Edit</strong> → change <strong>Status</strong> to <em>Inactive</em> (or <em>Transferred/Withdrawn</em>). The student disappears from attendance lists and fee collection but their history is preserved.</p>

      </div>

    </li>

  </ul>



  <h3>Handover Checklist — Before You Leave the School</h3>

  <div class="callout success-box">

    <i class="fas fa-clipboard-check"></i>

    <div>

      <strong>Confirm all of these before ending the training session:</strong>

      <ul style="margin:.5rem 0 0;padding-left:1.2rem;font-size:.87rem;line-height:2;">

        <li>Admin can log in successfully</li>

        <li>Academic year and term are set correctly</li>

        <li>At least one class and one fee type have been created</li>

        <li>At least one test student has been added and a test payment recorded</li>

        <li>The accountant or cashier has recorded a payment and printed a receipt</li>

        <li>At least one teacher has accessed the Teacher Portal on their phone</li>

        <li>Teacher Portal attendance has been demonstrated (Mark All Present → Save)</li>

        <li>A parent account has been created and the portal link shared</li>

        <li>The head teacher knows how to generate a terminal report</li>

        <li>The school has the ORIC support contact saved: <strong>+233 537 793 106</strong></li>

        <li>All staff know to contact their admin first for password issues</li>

      </ul>

    </div>

  </div>



  <div class="callout tip" style="margin-top:1rem;">

    <i class="fas fa-phone"></i>

    <div>

      <strong>ORIC Network Support:</strong><br>

      WhatsApp / Call: <strong>+233 537 793 106</strong><br>

      Email: <strong>info@oricnetwork.com</strong><br>

      Web: <strong>oricnetwork.com</strong><br>

      <span style="font-size:.8rem;">Always remind the school to try their own admin first. Most issues (forgotten passwords, wrong class) can be resolved internally.</span>

    </div>

  </div>

</section>



<div style="height:3rem;"></div>

</main>

</div><!-- /guide-wrap -->



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>

// Active sidebar link on scroll

const sections = document.querySelectorAll('.guide-section');

const navLinks  = document.querySelectorAll('#guide-nav a');



const observer = new IntersectionObserver(entries => {

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      const id = '#' + entry.target.id;

      navLinks.forEach(a => {

        a.classList.toggle('active', a.getAttribute('href') === id);

      });

    }

  });

}, { rootMargin: '-20% 0px -70% 0px' });



sections.forEach(s => observer.observe(s));



// Smooth scroll for nav links

navLinks.forEach(a => {

  a.addEventListener('click', e => {

    e.preventDefault();

    const target = document.querySelector(a.getAttribute('href'));

    if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });

  });

});

</script>

</body>

</html>

