# Certificates, Audit & BI — Figma Production Specs (Sprint 8) --- ## 1. CERTIFICATE TEMPLATES (CERT-01) ### Template Management Page ``` ┌──────────────────────────────────────────────────────────┐ │ Certificate Templates [+ New Template]│ ├──────────────────────────────────────────────────────────┤ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ [Preview] │ │ [Preview] │ │ [Preview] │ │ │ │ │ │ │ │ │ │ │ │ COMPLETION │ │ ACHIEVEMENT │ │ ATTENDANCE │ │ │ │ CERTIFICATE│ │ CERTIFICATE│ │ CERTIFICATE│ │ │ │ │ │ │ │ │ │ │ │ Default │ │ Active │ │ Active │ │ │ │ │ │ │ │ │ │ │ │ [Edit] [Use]│ │ [Edit] [Use]│ │ [Edit] [Use]│ │ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ ┌─────────────┐ ┌─────────────┐ │ │ │ [Preview] │ │ [Preview] │ │ │ │ │ │ │ │ │ │ MILESTONE │ │ CUSTOM │ │ │ │ CERTIFICATE│ │ TEMPLATE │ │ │ │ │ │ │ │ │ │ Active │ │ Draft │ │ │ │ │ │ │ │ │ │ [Edit] [Use]│ │ [Edit] [Use]│ │ │ └─────────────┘ └─────────────┘ │ └──────────────────────────────────────────────────────────┘ ``` ### Create/Edit Template Modal ``` RP/Modal (xl) ├── Header: "Create Certificate Template" ├── Content: │ ├── Name: RP/Input "Completion Certificate" │ ├── Type: RP/Select │ │ [Completion] [Achievement] [Attendance] [Milestone] [Custom] │ │ │ ├── Background Image: │ │ Current: [Preview thumbnail] │ │ [Upload New] [Remove] │ │ Accepted: PNG, JPG (min 1200×800px) │ │ │ ├── Layout Configuration: │ │ ├── Title Position: RP/Select [Top-Center] [Middle-Center] │ │ ├── Student Name Font Size: RP/Input "32" │ │ ├── Body Text Position: RP/Select [Below Name] [Center] │ │ ├── School Logo: [Show] [Hide] │ │ ├── Logo Position: [Top-Left] [Top-Center] [Top-Right] │ │ ├── Signature Lines: [Show] [Hide] │ │ └── QR Code: [Show] [Hide] (for verification) │ │ │ ├── Color Scheme: │ │ Primary: RP/ColorPicker #0B3A66 │ │ Accent: RP/ColorPicker #D4A017 │ │ Text: RP/ColorPicker #0F172A │ │ │ ├── Preview: [Live preview panel] │ │ │ ├── Set as Default: RP/Toggle │ └── Is Active: RP/Toggle (default: on) ├── Footer: [Cancel] [Save Template] ``` ### Template Preview ``` ┌──────────────────────────────────────────────────────────┐ │ Certificate Preview │ │ │ │ ╔══════════════════════════════════════════════════════╗│ │ ║ [School Logo] RP LEARNING PORTAL ║│ │ ║ ║│ │ ║ CERTIFICATE OF COMPLETION ║│ │ ║ ║│ │ ║ This is to certify that ║│ │ ║ ║│ │ ║ Amara Asante ║│ │ ║ ───────────── ║│ │ ║ ║│ │ ║ has successfully completed the 2025–2026 ║│ │ ║ academic year with distinction. ║│ │ ║ ║│ │ ║ [QR Code] [Signature 1] [Signature 2] ║│ │ ║ Principal Director ║│ │ ║ ║│ │ ║ Verification: verify.rplearning.com/CERT-XXXX ║│ │ ╚══════════════════════════════════════════════════════╝│ │ │ │ [Download PDF] [Print] [Edit Template] │ └──────────────────────────────────────────────────────────┘ ``` --- ## 2. CERTIFICATE PREVIEW (CERT-02) ### Issued Certificate View ``` RP/Card (full-width) ├── Certificate image (scaled to fit) ├── Below image: │ ├── Certificate #: CERT-2026-00042 │ ├── Type: Completion │ ├── Issued: June 12, 2026 │ ├── Issued by: Admin │ ├── Verification Code: a1b2c3d4 │ └── Verification URL: verify.rplearning.com/CERT-00042 [Copy] ├── Actions: │ ├── [Download PDF] │ ├── [Print] │ ├── [Share Link] │ └── [Revoke] (admin only) ``` --- ## 3. STUDENT CERTIFICATES (CERT-03) ### Certificate List ``` ┌──────────────────────────────────────────────────────────┐ │ My Certificates │ ├──────────────────────────────────────────────────────────┤ │ Tabs: [All (5)] [Completion (2)] [Achievement (2)] [Milestone (1)]│ ├──────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ [Thumbnail] Certificate of Completion │ │ │ │ Issued: June 12, 2026 │ │ │ │ [Download] [View] [Verify] │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ [Thumbnail] Streak 30 Achievement │ │ │ │ Issued: May 28, 2026 │ │ │ │ [Download] [View] [Verify] │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ [Thumbnail] Perfect Attendance Award │ │ │ │ Issued: Apr 15, 2026 │ │ │ │ [Download] [View] [Verify] │ │ │ └──────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────┘ ``` ### Certificate Verification (Public) ``` ┌──────────────────────────────────────────────────────────┐ │ Certificate Verification │ │ │ │ Enter verification code: │ │ ┌────────────────────────────────────────┐ │ │ │ CERT-2026-00042 │ │ │ └────────────────────────────────────────┘ │ │ [Verify] │ │ │ │ Result: ✓ VERIFIED │ │ │ │ Student: Amara Asante │ │ Type: Certificate of Completion │ │ Issued: June 12, 2026 │ │ Issued by: RP Learning Portal │ │ │ │ [View Certificate] │ └──────────────────────────────────────────────────────────┘ ``` --- ## 4. AUDIT LOG VIEWER (AUDIT-01) ### Full Audit Trail ``` ┌──────────────────────────────────────────────────────────┐ │ Audit Logs [Export ▾]│ ├──────────────────────────────────────────────────────────┤ │ Filters: │ │ [All Users ▾] [All Events ▾] [All Modules ▾] │ │ [Date Range: Jun 1 – Jun 12 ▾] [IP Address] │ ├──────────────────────────────────────────────────────────┤ │ │ │ Jun 12, 3:45 PM │ Admin │ updated │ students │ ··· │ Jun 12, 2:30 PM │ System │ created │ invoices │ ··· │ Jun 12, 1:15 PM │ Admin │ created │ teachers │ ··· │ Jun 12, 11:00 AM│ Dr. Mensah │ updated │ attendance│ ··· │ Jun 12, 9:30 AM │ Admin │ login │ auth │ ··· │ Jun 11, 4:15 PM │ Admin │ deleted │ resources │ ··· │ Jun 11, 2:00 PM │ System │ created │ payments │ ··· │ Jun 11, 10:00 AM│ Mrs. Aidoo │ updated │ grades │ ··· │ │ │ Showing 1-25 of 1,247 logs │ │ [< Previous] [Next >] │ └──────────────────────────────────────────────────────────┘ ``` ### Event Type Badges | Event | Badge | Color | |-------|-------|-------| | created | + created | green | | updated | ✏ updated | blue | | deleted | 🗑 deleted | red | | login | 🔑 login | grey | | logout | 🔓 logout | grey | | export | 📥 export | purple | | payment | 💰 payment | green | | notification | 🔔 notification | amber | ### Audit Detail Modal ``` RP/Modal (lg) ├── Header: "Audit Log #1247" ├── Content: │ ├── Timestamp: Jun 12, 2026 at 3:45:12 PM │ ├── User: Admin (admin@rplearning.com) │ ├── Event: updated │ ├── Module: students │ ├── Record: Amara Asante (User #42) │ ├── IP Address: 192.168.1.1 │ ├── User Agent: Chrome 125.0 on Windows 10 │ │ │ ├── Changes (before/after): │ │ ┌─────────────┬─────────────┬─────────────┐ │ │ │ Field │ Before │ After │ │ │ ├─────────────┼─────────────┼─────────────┤ │ │ │ ops_score │ 75.0 │ 78.0 │ │ │ │ risk_level │ medium │ low │ │ │ └─────────────┴─────────────┴─────────────┘ │ │ │ └── Tags: ["ops", "recalculation"] ├── Footer: [Close] [Export This Entry] ``` ### Export Options ``` [Export ▾] dropdown: ├── Export to Excel (.xlsx) ├── Export to PDF └── Export filtered results ``` --- ## 5. BI DASHBOARD — Executive (BI-01) ### Super-Admin Analytics Dashboard ``` ┌──────────────────────────────────────────────────────────┐ │ Executive Dashboard Period: Jun 2026 │ ├──────────────────────────────────────────────────────────┤ │ │ │ KPI ROW: │ │ ┌─────────┬─────────┬─────────┬─────────┬─────────┐ │ │ │Enrolled │Attendance│Revenue │OPS Avg │At-Risk │ │ │ │245 │92% │₵ 196K │72% │18 │ │ │ │↑ 12 │↑ 2% │↑ 15% │↑ 3% │↓ 4 │ │ │ └─────────┴─────────┴─────────┴─────────┴─────────┘ │ │ │ │ CHARTS ROW 1: │ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ CH-11: Line │ │ CH-09: Dual Line │ │ │ │ Attendance Trend │ │ Revenue Trend │ │ │ │ (by term) │ │ (realized/projected) │ │ │ └─────────────────────┘ └─────────────────────┘ │ │ │ │ CHARTS ROW 2: │ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ CH-04: Stacked Bar │ │ CH-07: Horiz Bar │ │ │ │ Enrollment by Level │ │ At-Risk by Subject │ │ │ └─────────────────────┘ └─────────────────────┘ │ │ │ │ CHARTS ROW 3: │ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ CH-12: Bar │ │ CH-10: Funnel │ │ │ │ Class Comparison │ │ Payment Conversion │ │ │ └─────────────────────┘ └─────────────────────┘ │ │ │ │ BOTTOM ROW: │ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │ │ Top Performers │ │ System Health │ │ │ │ ├── Amara A. 85% │ │ ├── Active Users: 42 │ │ │ │ ├── Kofi M. 82% │ │ ├── Sessions Today: 8│ │ │ │ ├── Esi B. 80% │ │ ├── Messages: 156 │ │ │ │ └── Yaa A. 78% │ │ └── Uptime: 99.9% │ │ │ └─────────────────────┘ └─────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────┘ ``` ### Period Selector ``` [Today] [This Week] [This Month ▾] [This Term] [This Year] Custom: [Start Date] to [End Date] ``` --- ## 6. STUDENT RISK SCORES (BI-02) ### Risk Score Table ``` ┌──────────────────────────────────────────────────────────┐ │ Student Risk Assessment Period: Jun 2026 │ ├──────────────────────────────────────────────────────────┤ │ Tabs: [All (245)] [Critical (2)] [High (8)] [Medium (8)] [Low (227)]│ ├──────────────────────────────────────────────────────────┤ │ │ │ Risk │ Student │ Class │ OPS │ Attendance │ Factors │ │ ───────────────────────────────────────────────────────│ │ 🔴 Critical │ Kofi M. │ JSS 2 │ 32% │ 65% │ Low OPS, Low Attn│ │ 🔴 Critical │ Esi B. │ JSS 1 │ 28% │ 58% │ Multiple factors │ │ 🟡 High │ Yaa A. │ JSS 3 │ 45% │ 72% │ Declining OPS │ │ 🟡 High │ Kwame D. │ JSS 2 │ 48% │ 78% │ Exam failures │ │ 🟢 Low │ Amara A. │ JSS 2 │ 85% │ 96% │ — │ │ │ │ [Export Risk Report] [Send Interventions] │ └──────────────────────────────────────────────────────────┘ ``` ### Risk Detail Modal ``` RP/Modal (lg) ├── Header: "Risk Assessment — Kofi Mensah" ├── Content: │ ├── Overall Risk: CRITICAL (Score: 82/100) │ │ ┌──────────────────────────────────────────┐ │ │ │ Risk Gauge: ████████████████████░░░ 82 │ │ │ │ [Low] [Medium] [HIGH] [CRITICAL] │ │ │ └──────────────────────────────────────────┘ │ │ │ ├── Risk Factors: │ │ ├── Attendance: 65% (weight: 30%) → Score: 28 │ │ ├── OPS Trend: Declining (weight: 25%) → Score: 22 │ │ ├── Exam Performance: 32% (weight: 20%) → Score: 18 │ │ ├── Assignment Completion: 40% (weight: 15%) → Score: 9 │ │ └── Participation: Low (weight: 10%) → Score: 5 │ │ │ ├── Recommendations: │ │ 1. Schedule parent meeting (priority: high) │ │ 2. Assign intervention plan (priority: high) │ │ 3. Increase attendance monitoring (priority: medium) │ │ 4. Provide additional tutoring (priority: medium) │ │ │ └── History: [Sparkline of risk score over time] ├── Footer: [Create Intervention] [Contact Parent] [Close] ``` --- ## 7. TEACHER PERFORMANCE (BI-03) ### Performance Table ``` ┌──────────────────────────────────────────────────────────┐ │ Teacher Performance Metrics Period: Jun 2026 │ ├──────────────────────────────────────────────────────────┤ │ │ │ Teacher │ Sessions │ Graded │ Attn │ OPS │ KPI │ │ ───────────────────────────────────────────────────────│ │ Dr. Mensah │ 24 │ 18 │ 94% │ 78% │ 85/100│ │ Mrs. Aidoo │ 22 │ 15 │ 91% │ 75% │ 82/100│ │ Mr. Ofori │ 20 │ 12 │ 88% │ 72% │ 78/100│ │ Mrs. Opoku │ 18 │ 10 │ 85% │ 68% │ 74/100│ │ Mr. Tetteh │ 22 │ 16 │ 90% │ 74% │ 80/100│ │ │ │ [Export Report] [View Details] │ └──────────────────────────────────────────────────────────┘ ``` ### Teacher KPI Detail ``` RP/Modal (lg) ├── Header: "KPI Score — Dr. Mensah" ├── Content: │ ├── Overall KPI: 85/100 │ │ Radial gauge: ████████████░░░ 85 │ │ │ ├── Breakdown: │ │ ├── Sessions Conducted: 24/28 (86%) — Weight: 30% │ │ ├── Assignments Graded: 18/20 (90%) — Weight: 25% │ │ ├── Attendance Logged: 94% — Weight: 20% │ │ ├── Student OPS Growth: +5% — Weight: 15% │ │ └── Resources Uploaded: 8 — Weight: 10% │ │ │ ├── Trend: [Sparkline of KPI over 6 months] │ │ │ └── Compared to school average: +12 points ├── Footer: [Close] [Export PDF] ``` --- ## 8. CH-11: LINE — Attendance Trend (BI) ```javascript { chart: { type: 'line', height: 328 }, series: [{ name: 'Attendance Rate', data: [88, 89, 91, 90, 92, 93], color: '#1E5FA8', lineWidth: 3, curve: 'smooth' }], xaxis: { categories: ['Term 1', 'Term 2', 'Term 3', 'Term 4', 'Term 5', 'Term 6'], labels: { style: { colors: '#64748B', fontSize: '12px' } } }, yaxis: { min: 80, max: 100, labels: { formatter: (v) => v + '%', style: { colors: '#64748B', fontSize: '12px' } } }, tooltip: { y: { formatter: (v) => v + '%' } }, grid: { borderColor: '#E2E8F0', strokeDashArray: 4 }, annotations: { yaxis: [{ y: 80, borderColor: '#DC2626', label: { text: 'Minimum Target (80%)', style: { color: '#DC2626' } } }] } } ``` --- ## 9. DARK MODE — Certificates, Audit, BI | Element | Light | Dark | |---------|-------|------| | Certificate BG | #FFFFFF | #1E293B | | Certificate border | #E2E8F0 | #334155 | | Risk gauge (critical) | #DC2626 | #F87171 | | Risk gauge (high) | #F59E0B | #FBBF24 | | Risk gauge (medium) | #1E5FA8 | #60A5FA | | Risk gauge (low) | #22C55E | #4ADE80 | | KPI gauge | #0B3A66 | #60A5FA | | Audit table hover | #F1F5F9 | #1E293B | | BI card BG | #FFFFFF | #1E293B | | BI card border | #E2E8F0 | #334155 | | BI KPI text | #0F172A | #F8FAFC | | Trend arrow up | #22C55E | #4ADE80 | | Trend arrow down | #DC2626 | #F87171 | --- ## 10. EMPTY STATES | Screen | Title | CTA | |--------|-------|-----| | CERT-01 | "No certificate templates" | [Create Template] | | CERT-03 | "No certificates earned yet" | "Keep working hard!" | | AUDIT-01 | "No audit logs yet" | "Actions will appear here" | | BI-01 | "Insufficient data" | "Need at least 30 days of data" | | BI-02 | "No at-risk students" | "All students are performing well" | --- ## 11. ACCESSIBILITY — Certificates, Audit, BI - Certificate preview: `role="img"` with `aria-label="Certificate preview"` - Risk gauge: `role="meter"`, `aria-valuenow`, `aria-valuemin`, `aria-valuemax` - KPI gauge: Same as risk gauge - Audit table: `aria-sort` on sortable columns - BI charts: All charts have `aria-label` describing the data - Verification form: Error/success messages via `aria-live="polite"` - Export buttons: `aria-label="Export to [format]"`