Arvios LMS — Design Approval
High-fidelity wireframes using shadcn primitives. Each section lists the exact components used so engineering can install + assemble without UI design back-and-forth.
1. Course Catalog
/learning — staff browses courses for their client, filters by line of business + status.
app.arviosvault.ai/learning
A
Arvios · Test Medical Services
My Learning
12 courses available · 3 in progress
All lines of business All statuses
Claims
7 lessons · 32 min
Claim Intake 101
Eagle-eye walkthrough across SF, portal, email channels.
60% complete
In progress
Billing
5 lessons · 22 min
EOB Reading Basics
Read explanation-of-benefits documents at scale.
Start course
Credentialing
9 lessons · 47 min
Provider Onboarding
Bring a new provider live across systems.
Earned 92%
Completed
Components
card
badge
input
select
button
progress
tabs
aspect-ratio
avatar
skeleton
empty
2. Course Landing
/learning/courses/:slug — hero, lesson list, resume CTA.
app.arviosvault.ai/learning/courses/claim-intake-101
Claims
Pass 80%
7 lessons · ~32 min
Claim Intake 101
Walkthrough of intake across Salesforce, the client portal, and email triage. Covers ownership handoff and SLA timing.
▶ Continue lesson 3
Restart course
Owner
GE
Grace Edmondson
· revised May 2, 2026
Lessons
2 of 7 passed
✓
Channels overview
4 min · Quiz passed
100%
✓
Salesforce intake
6 min · Quiz passed
90%
3
Portal intake — resume here
5 min · Quiz pending
Continue ▶
5
Ownership handoff
5 min
Not started
Components
card
breadcrumb
badge
button
progress
separator
item
aspect-ratio
avatar
3. Lesson Player
/learning/courses/:slug/lessons/:lessonSlug — sectioned playlist, auto-advance, quiz at end.
app.arviosvault.ai/learning/courses/claim-intake-101/lessons/portal-intake
Portal intake
Lesson 3 of 7
Segment 3/5 · screen recording · "Submitting a claim in Salesforce"
◀ Previous segment
Skip ▶
Mark watched · Next ▶
Components
slider
button
tooltip
badge
progress
kbd
breadcrumb
separator
4. Quiz Panel
Slides in after final segment. MCQ single + multi correct. Per-question feedback.
app.arviosvault.ai/learning/courses/claim-intake-101/lessons/portal-intake (quiz)
Question 2 of 4
Pass 80%
Which channel is the primary source of new claims?
✓
Correct
Salesforce is the canonical record-of-truth; email and portal items are routed into it.
Components
card
radio-group
checkbox
label
button
progress
alert
form
separator
5. My Learning
/learning/me — staff sees in-progress + completed courses, certificates earned.
app.arviosvault.ai/learning/me
My Learning
In progress (3)
Completed (5)
Certificates
Claim Intake 101 Claims
Lesson 3/7 · last activity 2h ago
Continue
EOB Reading Basics Billing
Lesson 1/5 · started yesterday
Continue
HIPAA Compliance Refresher Compliance
Lesson 2/4 · last activity 4d ago
Continue
Components
tabs
card
progress
button
badge
avatar
scroll-area
empty
6. Public Certificate
/cert/:slug — verifiable URL, no auth, noindex.
arviosvault.ai/cert/3HQ8J4F2
CERTIFICATE OF COMPLETION
Marisol Pérez
has completed
Claim Intake 101
Claims
Final score 92%
Issued May 12, 2026 · Verified at arviosvault.ai/cert/3HQ8J4F2
Components
card
separator
badge
7. Admin · LMS Module (Directus extension)
Render status board inside Directus admin. Native Directus theming; layout mirrored here for review.
api.arviosvault.ai/admin/lms
LMS · Render queue
3 lessons rendering · 1 failed · last poll 24s ago
Refresh
+ New course
Lesson Course Provider Status Updated
Portal intake
Claim Intake 101
HeyGen
Ready 5m ago
View Re-render
EOB columns
EOB Basics
HeyGen
Rendering 60% 30s ago
View log
Provider docs
Onboarding
HeyGen
Failed 1h ago
View log Re-render
Channels overview
Claim Intake 101
HeyGen
Ready 3d ago
View
Components
table
badge
button
tooltip
sonner
sheet
scroll-area
Install commands
Single batch — kept tight on purpose.
bunx shadcn@latest add card badge button input select progress
bunx shadcn@latest add radio-group checkbox label form alert
bunx shadcn@latest add tabs separator skeleton empty avatar
bunx shadcn@latest add breadcrumb tooltip sheet sonner scroll-area
bunx shadcn@latest add aspect-ratio item slider table
Notes
Video player: native <video> + composed slider + button + tooltip. No third-party (Plyr/Video.js) for MVP.Quiz forms: react-hook-form + shadcn form wrapper. Validation + error states free.Toasts: sonner for "Quiz passed", "Re-render queued", "Certificate ready".Empty states: empty for zero courses, zero certificates, zero render history.Loading: skeleton on catalog cards, course landing, quiz fetch.Admin module: Directus extension uses Vue 3 + Directus design system, not React/shadcn — board layout above is a fidelity preview, real rendering will use Directus primitives.
✓
Approve all seven screens above to lock UX surface. Implementation plan derives layouts + state machines from these mockups.