# ADM-27 through ADM-31: Admin Settings — Figma Production Specs

---

## 1. ANNOUNCEMENTS (ADM-27)

### Create Announcement Form

```
RP/Card (padding/lg, shadow/md)
├── Header: "Create Announcement"
├── Content:
│   ├── Title: RP/Input (text, required)
│   ├── Body: RP/Input (textarea, rows: 8, rich text)
│   │   Toolbar: Bold, Italic, Underline, Lists, Links, Images
│   ├── Target Audience: RP/Select (multi-select)
│   │   Options: [All] [Admin] [Teacher] [Student] [Parent]
│   ├── Urgent: RP/Toggle
│   │   "Appears as system banner at top of all portals"
│   ├── Publish: RP/Select
│   │   [Publish Now] or [Schedule for date]
│   └── Attachments: RP/FileUpload (optional)
├── Footer: [Save Draft] [Publish]
```

### Announcement Table

```
Columns: Title | Target | Published | Urgent | Reads | Status | Actions
├── End of Term Notice    | All      | Jun 10  | Yes  | 186 | Published | [Edit] [Archive]
├── Fee Reminder          | Parent   | Jun 8   | No   | 45  | Published | [Edit] [Archive]
├── Holiday Schedule      | All      | Jun 1   | No   | 210 | Published | [Edit] [Archive]
├── Draft: New Policy     | —        | —       | No   | 0   | Draft     | [Edit] [Publish] [Delete]
```

### Announcement States

| Status | Badge | Description |
|--------|-------|-------------|
| `draft` | grey | Not yet published |
| `published` | green | Live and visible |
| `scheduled` | blue | Will publish at scheduled time |
| `archived` | grey (muted) | Hidden from view |

---

## 2. AUDIT LOGS (ADM-28)

### Audit Log Table (Read-Only)

```
Columns: Timestamp | User | Event | Module | IP Address | Details
├── Jun 12, 3:45 PM | Admin    | updated  | students  | 192.168.1.1 | OPS recalc for Amara A.
├── Jun 12, 2:30 PM | System   | created  | invoices  | —           | Batch: 245 invoices generated
├── Jun 12, 1:15 PM | Admin    | created  | teachers  | 192.168.1.1 | Invitation sent to t@ex.com
├── Jun 12, 11:00 AM| Dr. Mensah| updated | attendance| 10.0.0.1   | JSS 2 Math — 18 present
├── Jun 12, 9:30 AM | Admin    | login    | auth      | 192.168.1.1 | Successful login
├── Jun 11, 4:15 PM | Admin    | deleted  | resources | 192.168.1.1 | Removed: old_worksheet.pdf
```

### Event Types

| Event | Icon | Description |
|-------|------|-------------|
| `created` | + | Record created |
| `updated` | ✏ | Record modified |
| `deleted` | 🗑 | Record deleted |
| `login` | 🔑 | User login attempt |
| `logout` | 🔓 | User logout |
| `export` | 📥 | Data exported |
| `payment` | 💰 | Payment processed |
| `notification` | 🔔 | Notification sent |

### Audit Detail Modal

```
RP/Modal (lg)
├── Header: "Audit Log Detail"
├── 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: { "ops_score": 75.0 }
│   │   After:  { "ops_score": 78.0 }
│   │
│   └── Tags: ["ops", "recalculation"]
├── Footer: [Close]
```

### Filters

```
Filter Bar:
├── User: RP/Select (all users)
├── Event: RP/Select (all events / specific)
├── Module: RP/Select (all modules / specific)
├── Date Range: RP/DateRange
├── IP Address: RP/Input (text)
└── [Export to Excel] [Export to PDF]

Note: "Audit logs are immutable. They cannot be modified or deleted."
```

---

## 3. SCHOOL SETTINGS (ADM-29)

### Tab Structure

```
Tabs: [Branding] [School Info] [OPS Config] [Notifications] [Email] [SMS] [Paystack] [Academic] [Zoom]
```

### Branding Tab

```
RP/Card (padding/md)
├── School Logo
│   Current: [Logo preview 120×120]
│   [Upload New] [Remove]
│   Accepted: PNG, JPG, SVG (max 2MB)
│
├── School Name
│   RP/Input: "RP Learning Portal"
│
├── Brand Colors
│   Primary Color:   RP/ColorPicker #0B3A66
│   Secondary Color: RP/ColorPicker #1E5FA8
│   Accent Color:    RP/ColorPicker #D4A017
│
├── Preview
│   Live preview card showing colors applied
│
└── [Save Branding]
```

### School Info Tab

```
RP/Card (padding/md)
├── School Name: RP/Input "RP Learning Portal"
├── Address: RP/Input (textarea)
├── Phone: RP/Input "+233 30 123 4567"
├── Email: RP/Input "info@rplearning.com"
├── Website: RP/Input "https://rplearning.com"
├── Motto: RP/Input "Excellence in Education"
└── [Save School Info]
```

### OPS Configuration Tab

```
RP/Card (padding/md)
├── H5: "OPS Component Weights"
├── "Weights must total 100%"
│
├── Exams:         [30] %  ██████████████████████████████░░░░░░░░░░░░
├── Assignments:   [20] %  ████████████████████░░░░░░░░░░░░░░░░░░░░░
├── Attendance:    [25] %  █████████████████████████░░░░░░░░░░░░░░░░░
├── Participation: [15] %  ███████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░
├── Behavior:      [10] %  ██████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
│
├── Total: 100% ✓ (green) or ⚠ (red if not 100%)
│
├── Passing Score: [50] %
├── Default OPS Weights: [Reset to Defaults]
│
└── [Save OPS Configuration]
```

### Notification Settings Tab

```
RP/Card (padding/md)
├── H5: "Default Notification Channels"
│
├── Category              In-App  Email  SMS
├── Academic Updates      [ON]    [ON]   [OFF]
├── Financial / Invoices  [ON]    [ON]   [ON]
├── Attendance Warnings   [ON]    [ON]   [ON]
├── Action Items          [ON]    [ON]   [OFF]
├── System Announcements  [ON]    [ON]   [OFF]
├── Teacher Messages      [ON]    [OFF]  [OFF]
├── Payroll / Earnings    [ON]    [ON]   [OFF]
│
├── Digest Frequency: [Real-time ▾]
│   Options: Real-time / Daily Digest / Weekly Digest
│
├── Quiet Hours: [10:00 PM] to [7:00 AM]
│
└── [Save Notification Settings]
```

### Email Settings Tab

```
RP/Card (padding/md)
├── H5: "Email Configuration (SMTP)"
│
├── Mail Driver: [SMTP ▾]
├── Host: RP/Input "smtp.mailprovider.com"
├── Port: RP/Input "587"
├── Encryption: [TLS ▾]
├── Username: RP/Input (email)
├── Password: RP/Input (password)
├── From Address: RP/Input "noreply@rplearning.com"
├── From Name: RP/Input "RP Learning Portal"
│
├── [Test Email] → sends test to admin email
├── [Save Email Settings]
```

### SMS Settings Tab

```
RP/Card (padding/md)
├── H5: "SMS Configuration (TxtConnect)"
│
├── API Key: RP/Input (password)
├── API Secret: RP/Input (password)
├── Sender ID: RP/Input "RP-LEARN"
├── Test Phone: RP/Input "+233 24 123 4567"
│
├── [Test SMS] → sends test message
├── [Save SMS Settings]
```

### Paystack Settings Tab

```
RP/Card (padding/md)
├── H5: "Payment Gateway (Paystack)"
│
├── Public Key: RP/Input (password) "pk_live_xxxxxxxxxxxx"
├── Secret Key: RP/Input (password) "sk_live_xxxxxxxxxxxx"
├── Payment URL: RP/Input "https://api.paystack.co"
├── Merchant Email: RP/Input "payments@rplearning.com"
├── Currency: GHS (fixed, read-only)
├── Currency Symbol: ₵ (fixed, read-only)
│
├── Webhook URL (read-only):
│   https://portal.rplearning.com/webhooks/paystack
│   [Copy URL]
│
├── Test Mode: RP/Toggle
│   "Enable test mode for sandbox payments"
│
├── [Test Connection] → verifies API keys
├── [Save Paystack Settings]
```

### Academic Settings Tab

```
RP/Card (padding/md)
├── H5: "Academic Configuration"
│
├── Current Academic Year: RP/Select "2025–2026"
├── Current Term: RP/Select "Term 3"
│
├── Attendance Configuration:
│   Auto-attendance threshold: [10] minutes
│   "Students joining within X minutes of start = Present"
│
├── Grading Defaults:
│   Default grading type: [Percentage ▾]
│   Passing grade: [50]%
│
├── Assessment Defaults:
│   Default attempt limit: [Single Attempt ▾]
│   Default feedback visibility: [Both ▾]
│
└── [Save Academic Settings]
```

### Zoom Settings Tab

```
RP/Card (padding/md)
├── H5: "Video Conferencing (Zoom Video SDK)"
│
├── SDK Key: RP/Input (password)
├── SDK Secret: RP/Input (password)
│
├── Webhook URL (read-only):
│   https://portal.rplearning.com/webhooks/zoom
│   [Copy URL]
│
├── Session Defaults:
│   Default session duration: [60] minutes
│   Max participants: [50]
│   Recording enabled: [ON]
│
├── Webhook Signature Verification: [Enabled ▾]
│
├── [Test Connection] → generates test JWT token
├── [Save Zoom Settings]
```

---

## 4. TEACHER COMPENSATION (ADM-30)

### Compensation Table

```
Columns: Teacher | Admin Fee % | Per-Session Rate | Status | Last Changed | Changed By | Actions
├── Dr. Mensah   | 15%  | ₵ 200 | Active | Jun 1  | Admin  | [Edit] [Audit Log]
├── Mrs. Aidoo   | 15%  | ₵ 180 | Active | Jan 1  | Admin  | [Edit] [Audit Log]
├── Mr. Ofori    | 12%  | ₵ 180 | Active | Mar 15 | Admin  | [Edit] [Audit Log]
├── Mrs. Opoku   | 15%  | ₵ 200 | Active | Jun 1  | Admin  | [Edit] [Audit Log]
├── Mr. Tetteh   | 15%  | ₵ 200 | Active | Jun 1  | Admin  | [Edit] [Audit Log]
```

### Edit Compensation Modal

```
RP/Modal (md)
├── Header: "Edit Compensation — Dr. Mensah"
├── Content:
│   ├── Teacher: "Dr. Mensah" (read-only)
│   ├── Current Admin Fee: 15% (read-only)
│   ├── New Admin Fee Percentage: RP/Input (number) "15"
│   │   Helper: "School default: 15%"
│   ├── Current Per-Session Rate: ₵ 200 (read-only)
│   ├── New Per-Session Rate: RP/Input (number) "200"
│   │   Currency: GHS (fixed)
│   ├── Effective Date: RP/Input (date) "today"
│   ├── Reason: RP/Input (textarea, required)
│   │   "Adjustment for senior teacher rate"
│   └── ⚠ "Change will be logged in payroll audit trail.
│          Historical payrolls always show the rate that was applied."
├── Footer: [Cancel] [Save Changes]
```

### Audit Log Panel (below table)

```
RP/Card (padding/md)
├── H5: "Compensation Audit Trail"
│
├── Table: Date | Teacher | Field | Old Value | New Value | Changed By | Reason
│   ├── Jun 1 | Dr. Mensah | admin_fee | 12% | 15% | Admin | Senior teacher rate
│   ├── Jan 1 | Mrs. Aidoo | session_rate | 150 | 180 | Admin | Annual adjustment
│   └── Mar 15 | Mr. Ofori | admin_fee | 15% | 12% | Admin | Probationary rate
│
└── [Export Audit Log]
```

---

## 5. ZOOM SETTINGS (ADM-31)

ADM-31 is the Zoom tab within ADM-29 (School Settings).
See School Settings > Zoom Settings tab above.

Additional ADM-31 standalone access:

### Zoom Configuration Status

```
RP/Card (padding/md)
├── H5: "Zoom Video SDK Status"
│
├── Connection Status: ● Connected (green) or ○ Disconnected (red)
├── SDK Key: pk_****xxx (masked)
├── Last JWT Generated: Jun 12, 2026 at 10:15 AM
├── Active Sessions: 2
├── Total Sessions Today: 8
│
├── Recent Webhooks:
│   ├── Jun 12, 10:30 AM — session.joined (Amara Asante)
│   ├── Jun 12, 10:28 AM — session.started (Dr. Mensah)
│   └── Jun 12, 10:15 AM — session.ended (Mrs. Aidoo)
│
└── [Test Connection] [View All Webhooks]
```

---

## 6. DARK MODE — Settings Screens

| Element | Light | Dark |
|---------|-------|------|
| Settings card BG | #FFFFFF | #1E293B |
| Settings card border | #E2E8F0 | #334155 |
| Active tab BG | color/secondary | color/secondary |
| Inactive tab BG | #F1F5F9 | #1E293B |
| Input BG | #FFFFFF | #0F172A |
| Input border | #CBD5E1 | #475569 |
| Input text | #0F172A | #F8FAFC |
| Color picker preview | Same | Same |
| Toggle ON | color/secondary | color/secondary |
| Toggle OFF | #CBD5E1 | #475569 |
| Audit log row | Same | Same |
| Password field | Same | Same |
| Webhook URL BG | #F8FAFC | #0F172A |

---

## 7. EMPTY STATES — Settings Screens

| Screen | Title | Description |
|--------|-------|-------------|
| ADM-27 | "No announcements yet" | "Create your first announcement to reach your school community." |
| ADM-28 | "No audit logs" | "Actions will be recorded here automatically." |
| ADM-30 | "No compensation settings" | "Set compensation rates for your teachers." |

---

## 8. LOADING / ERROR STATES

### Loading
```
Settings tabs: RP/Skeleton (rect, height: 400px)
Audit table: RP/Skeleton × 8 rows
Compensation table: RP/Skeleton × 5 rows
```

### Error
```
Save failure: RP/Banner (danger) "Failed to save settings. Please try again."
API test failure: RP/Banner (danger) "Connection failed. Check your credentials."
Permission error: RP/Banner (warning) "Only school administrators can access settings."
```

---

## 9. ACCESSIBILITY — Settings Screens

- Tabs: `role="tablist"`, each tab `role="tab"`, `aria-selected`
- Color picker: `aria-label` with current color value
- Password fields: Show/hide toggle with `aria-label="Show password"`
- Toggle switches: `role="switch"`, `aria-checked`
- Audit log: `aria-live="polite"` for new entries
- Webhook URLs: Copy button with `aria-label="Copy webhook URL to clipboard"`
- All form fields: `<label>` associated via `for`/`id`
- Save buttons: `aria-describedby` linking to unsaved changes warning