LMS Admin Dashboard & Tabbed Management Guide # LMS Admin Dashboard & Tabbed Management Guide The **Superable Learning Admin Dashboard** provides organization administrators with an accessible, keyboard-navigable ARIA tabbed control panel for managing courses, media assets, white-label branding, user permissions, access codes, and storage quotas. --- ## 🎹 Keyboard Navigation & Accessibility Features The Admin Dashboard is built with WCAG 2.2 AA compliant ARIA tab list semantics (`role="tablist"`, `role="tab"`, `role="tabpanel"`): - **Focus Control**: Pressing <kbd>Tab</kbd> moves focus directly to the active tab button. - **Switching Tabs**: Use <kbd>→</kbd> (Right Arrow) and <kbd>←</kbd> (Left Arrow) to cycle between tabs. Press <kbd>Home</kbd> to jump to the first tab (Courses) and <kbd>End</kbd> to jump to the final tab (Plan & Storage). - **Persistent Selection**: Active tab selection is saved automatically in `localStorage` so form submissions return you directly to your active tab. - **Screen Reader Navigation**: Each active tab panel features a single `<h1>` top heading so screen reader users (NVDA, JAWS, VoiceOver) can press <kbd>H</kbd> to jump past navigation tabs straight to main content. --- ## 📚 Tab 1: Courses & Packages The **Courses & Packages** tab lets you import, configure, and manage e-learning courses. ### Key Features 1. **Upload New Course (.zip)**: - Accepts compressed `.zip` course packages generated from the **Web Course Packager**, BuildXCL, or custom HTML authoring tools. - Packages must contain a valid `course_structure.json` or LC-JSON manifest file in the root. - Prohibited executable extensions (`.php`, `.sh`, `.exe`) are blocked automatically by our security sandbox. 2. **Access Modes**: - **Public (Open Access)**: Available to all portal visitors without requiring authentication. - **Restricted (Requires Login / Invite Key)**: Requires learners to be logged in with granted permissions or enter an active invitation key code. - **Teaser (Shows Preview Button)**: Displays course cards with a custom external preview link (e.g. video sample or landing page). - **Hidden (Admin Only)**: Concealed from the learner dashboard for draft reviews. 3. **Course Library Management**: - Update course titles, access modes, external BuildXCL links, and descriptions. - Delete outdated course folders with instant directory cleanup. --- ## 🖼️ Tab 2: Media Assets The **Media Assets** tab manages images, diagrams, infographics, and screenshots embedded inside courses. ### Key Features 1. **Targeted Uploads**: Select any course from your library and upload media files (`.png`, `.jpg`, `.jpeg`, `.svg`, `.webp`, `.gif`). 2. **Isolated Storage**: Uploaded files are isolated within your portal's course folder (`courses/tenants/{portalKey}/{courseId}/assets/`). 3. **AI & LLM Code Prompting**: - Use relative image paths when pasting course content generated by AI assistants (ChatGPT, Claude, Gemini): - **HTML Modules**: `<img src="assets/diagram-1.png" alt="Accessible description">` - **Markdown Modules**: `` --- ## 🎨 Tab 3: Branding & Logo The **Branding & Logo** tab allows organizations to fully white-label their e-learning portal aesthetics and legal notices. ### Key Features 1. **Organization Logo**: - Upload custom logos in `SVG`, `PNG`, `JPG`, `GIF`, or `WEBP` format (up to 5 MB). - CSS guardrails (`max-height: 44px; object-fit: contain`) prevent header overflow or broken mobile layouts. - Revert to default branding anytime using **Restore Default Logo**. 2. **Accessible Brand Typography (Font Family Selector)**: - Choose from 5 WCAG-verified Google Fonts: - `Atkinson Hyperlegible` *(Default - Highest Readability)* - `Inter` *(Clean Modern Sans-Serif)* - `Roboto` *(Neo-Grotesque Standard)* - `Open Sans` *(Neutral Legible Sans)* - `Lexend` *(Specialized Dyslexia-Friendly)* 3. **Portal Content & Contact Settings**: - **Portal Welcome Headline & Subheadline**: Customize hero text on the learner home page. - **Copyright Notice / Attribution Name**: Set custom copyright text (e.g., `© 2026 Acme Corp. All rights reserved.`). - **Organization Website URL**: Links the universal footer back to your main corporate site. - **Support & Help Desk Contact**: Renders direct support email/URL links in the footer. - **Terms of Service & Privacy Policy URLs**: Integrates mandatory enterprise compliance links. 4. **Collapsible Color Accordions**: - **Primary Color**: Header background and primary action buttons. - **Secondary Color**: Subtitles, borders, and secondary buttons. - **Accent Color**: High-visibility focus indicators (`:focus-visible`) and active item highlights. - **Automated Contrast Engine**: Primary colors are automatically tested for relative luminance against white text (light mode) and dark slate (dark mode). If contrast is below **4.5:1 WCAG AA**, rendered colors are automatically adjusted for full compliance. 5. **Form Action Button**: - Click **Save Branding & Logo Settings** to apply changes. A system status notice alert (`role="status"`, `aria-live="polite"`) confirms updates. --- ## 👥 Tab 4: Users & Access The **Users & Access** tab handles account creation, administrative role assignments, direct course permissions, and password resets. ### Key Features 1. **Create New User**: - Register new user accounts with Full Name, Email, Password, and optional **Grant Admin Privileges** checkbox. - **Premium only:** checking Grant Admin Privileges reveals an **Admin Role** selector — see Admin Roles (RBAC) below. 2. **Grant Direct Course Permission**: - Assign individual learner access to specific restricted courses. 3. **Registered Users Directory**: - View all registered accounts with role badges (`Admin`, `Editor`, `Viewer`, or `Learner`). - Perform administrative password resets with instant password updates. ### Admin Roles (RBAC) — Premium Only Premium's 3 admin seats can each be assigned one of three roles: | Role | Can do | | :--- | :--- | | **Admin** | Everything: courses, media, surveys, branding, custom CSS, user management, invitation keys, and accessibility audit requests. | | **Editor** | Courses, media uploads, and survey management only. Cannot touch branding, custom CSS, users, invitation keys, or audit requests. | | **Viewer** | Read-only. Can view every tab but cannot save or delete anything. | Sandbox and Pro accounts have a single admin seat, which always has the full **Admin** role — the role selector only appears on Premium. Every action is enforced on the server regardless of what the interface shows, so a restricted role can't bypass its limits by submitting a form directly. --- ## 🔑 Tab 5: Course Codes (Invitation Keys) The **Course Codes** tab manages invitation keys used for self-registration or batch course unlocks. ### Key Features 1. **Create Invitation Key**: - Define custom uppercase key codes (e.g., `ACME2026`). - Link keys to a specific restricted course or set to generic site unlock. - Set maximum usage limits (`-1` for unlimited uses). 2. **Key Usage Tracking**: - View active invitation codes and remaining uses. - Increment or decrement remaining uses anytime. --- ## 📊 Tab 6: Plan & Storage The **Plan & Storage** tab monitors subscription tiers and portal storage quota consumption. ### Key Features 1. **Subscription Status**: View plan level (e.g., `ENTERPRISE`, `STANDARD`), subscription status (`ACTIVE`), and provisioned domain key. 2. **Storage Usage Meter**: - Real-time progress bar tracking total file disk space against your allocated limit (e.g. `12.5 MB / 500 MB`). - Visual warnings appear in amber/red when storage utilization exceeds 90%. - Direct file path tracking to monitor course assets.