Skip to content

Commit 6671a90

Browse files
mbusch3mbusch3
committed
Reorganized Admin Report page - Need final UI and data decisions.
1 parent fe43e86 commit 6671a90

File tree

4 files changed

+138
-93
lines changed

4 files changed

+138
-93
lines changed

‎assets/css/udoit4-theme.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -865,6 +865,7 @@ input[type="color"] {
865865
border-radius: 8px;
866866
padding: .75rem 1rem;
867867
border: 1px solid var(--border-color);
868+
box-sizing: border-box;
868869
}
869870

870871
.separator {

‎assets/js/Components/Admin/AdminApp.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export default function AdminApp(initialData) {
154154
}
155155

156156
{ !loadingCourses && (
157-
<div className="non-scrollable">
157+
<div className="scrollable">
158158

159159
{('dashboard' === navigation) &&
160160
<AdminDashboard

‎assets/js/Components/Admin/AdminDashboard.js‎

Lines changed: 115 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useState, useEffect } from 'react'
2+
import ProgressCircle from '../Widgets/ProgressCircle'
3+
import '../HomePage.css'
24

35
export default function AdminDashboard({
46
t,
57
settings,
6-
courses,
7-
handleNavigation,
8-
addMessage
8+
courses
99
}) {
1010
const [dashboardStats, setDashboardStats] = useState({
1111
loading: true,
@@ -24,6 +24,21 @@ export default function AdminDashboard({
2424
newestScan: null
2525
})
2626

27+
const progressMeterRadius = () => {
28+
switch (settings?.user?.roles?.font_size) {
29+
case 'font-small':
30+
return 40;
31+
case 'font-normal':
32+
return 45;
33+
case 'font-large':
34+
return 50;
35+
case 'font-xlarge':
36+
return 60;
37+
default:
38+
return 40;
39+
}
40+
}
41+
2742
useEffect(() => {
2843
calculateStats()
2944
}, [courses])
@@ -108,6 +123,7 @@ export default function AdminDashboard({
108123
stats.totalInstructors = allInstructors.size
109124
stats.uniqueInstructorsUsingUdoit = udoitInstructors.size
110125
stats.accountBreakdown = accountStats
126+
stats.accountNumber = Object.keys(accountStats).length
111127

112128
// Find oldest and newest scans
113129
if (scanDates.length > 0) {
@@ -124,83 +140,111 @@ export default function AdminDashboard({
124140
}
125141

126142
const scanPercentage = dashboardStats.totalCourses > 0
127-
? ((dashboardStats.scannedCourses / dashboardStats.totalCourses) * 100).toFixed(1)
143+
? ((dashboardStats.scannedCourses / dashboardStats.totalCourses) * 100)
128144
: 0
129145

130146
const instructorAdoption = dashboardStats.totalInstructors > 0
131-
? ((dashboardStats.uniqueInstructorsUsingUdoit / dashboardStats.totalInstructors) * 100).toFixed(1)
147+
? ((dashboardStats.uniqueInstructorsUsingUdoit / dashboardStats.totalInstructors) * 100)
132148
: 0
133149

134150
return (
135-
<div className="p-3">
136-
<div className="flex-row justify-content-center mb-3">
137-
<h1 className="mt-0 mb-0 primary-dark">UDOIT Admin Dashboard</h1>
138-
</div>
139-
140-
<div>
141-
<div>
142-
<h2>Course Statistics</h2>
143-
<p>Total Courses: {dashboardStats.totalCourses}</p>
144-
<p>Scanned Courses: {dashboardStats.scannedCourses}</p>
145-
<p>Unscanned Courses: {dashboardStats.totalCourses - dashboardStats.scannedCourses}</p>
146-
<p>Scan Adoption Rate: {scanPercentage}%</p>
147-
<p>Courses Scanned in Last 30 Days: {dashboardStats.recentScans}</p>
148-
</div>
149-
150-
<div>
151-
<h2>Instructor Statistics</h2>
152-
<p>Total Instructors: {dashboardStats.totalInstructors}</p>
153-
<p>Instructors Using UDOIT: {dashboardStats.uniqueInstructorsUsingUdoit}</p>
154-
<p>Instructor Adoption Rate: {instructorAdoption}%</p>
155-
</div>
156-
157-
<div>
158-
<h2>Accessibility Statistics</h2>
159-
<p>Total Accessibility Issues Found: {dashboardStats.totalErrors}</p>
160-
<p>Total Suggestions Made: {dashboardStats.totalSuggestions}</p>
161-
<p>Total Items Fixed: {dashboardStats.totalFixed}</p>
162-
<p>Total Items Resolved: {dashboardStats.totalResolved}</p>
163-
<p>Total Files Reviewed: {dashboardStats.totalFilesReviewed}</p>
164-
165-
{dashboardStats.scannedCourses > 0 && (
166-
<>
167-
<p>Average Issues per Scanned Course: {(dashboardStats.totalErrors / dashboardStats.scannedCourses).toFixed(1)}</p>
168-
<p>Average Files Reviewed per Course: {(dashboardStats.totalFilesReviewed / dashboardStats.scannedCourses).toFixed(1)}</p>
169-
</>
170-
)}
171-
</div>
172-
173-
<div>
174-
<h2>Scan Activity</h2>
175-
{dashboardStats.oldestScan && (
176-
<p>Oldest Scan: {dashboardStats.oldestScan.toLocaleDateString()}</p>
177-
)}
178-
{dashboardStats.newestScan && (
179-
<p>Most Recent Scan: {dashboardStats.newestScan.toLocaleDateString()}</p>
180-
)}
181-
</div>
151+
<>
152+
<div className="flex-row gap-3 w-100 scrollable">
182153

183-
<div>
184-
<h2>Department/Account Breakdown</h2>
185-
{Object.entries(dashboardStats.accountBreakdown).map(([account, stats]) => (
186-
<div key={account}>
187-
<p><strong>{account}:</strong></p>
188-
<p style={{ marginLeft: '20px' }}>Total Courses: {stats.total}</p>
189-
<p style={{ marginLeft: '20px' }}>Scanned: {stats.scanned} ({stats.total > 0 ? ((stats.scanned / stats.total) * 100).toFixed(1) : 0}%)</p>
190-
<p style={{ marginLeft: '20px' }}>Total Issues: {stats.errors}</p>
154+
<div className="flex-column gap-3 w-100">
155+
<section className="callout-container">
156+
<div className="flex-column">
157+
<div className="flex-row justify-content-evenly gap-3">
158+
<div className="flex-column">
159+
<h2 className="callout-heading align-self-center text-center mt-1">Course Usage</h2>
160+
<div className="svg-container align-self-center">
161+
<ProgressCircle
162+
percent={scanPercentage}
163+
radius={progressMeterRadius()}
164+
circlePortion={75}
165+
strokeWidth={10}/>
166+
<div className="progress-text-container flex-column justify-content-center">
167+
<div className="progress-text">{scanPercentage.toFixed(0)}%</div>
168+
</div>
169+
</div>
170+
<div className="flex-row align-self-center count-summary">{dashboardStats.scannedCourses} of {dashboardStats.totalCourses} Courses Scanned</div>
171+
</div>
172+
173+
<div className="flex-column">
174+
<h2 className="callout-heading align-self-center text-center mt-1">Instructor Usage</h2>
175+
<div className="svg-container align-self-center">
176+
<ProgressCircle
177+
percent={instructorAdoption}
178+
radius={progressMeterRadius()}
179+
circlePortion={75}
180+
strokeWidth={10}/>
181+
<div className="progress-text-container flex-column justify-content-center">
182+
<div className="progress-text">{instructorAdoption.toFixed(0)}%</div>
183+
</div>
184+
</div>
185+
<div className="flex-row align-self-center count-summary">{dashboardStats.uniqueInstructorsUsingUdoit} of {dashboardStats.totalInstructors} Instructors Using UDOIT</div>
186+
</div>
187+
</div>
188+
189+
<div className="separator mt-3 mb-3"></div>
190+
191+
<div className="flex-column w-100 mb-2 gap-1">
192+
<p className="m-0"><span className="progress-text me-3">{dashboardStats.recentScans}</span> Courses Scanned in Last 30 Days</p>
193+
{dashboardStats.oldestScan && (<p className="m-0"><span className="progress-text me-3">{dashboardStats.oldestScan.toLocaleDateString()}</span> Oldest Scan</p>)}
194+
{dashboardStats.newestScan && (<p className="m-0"><span className="progress-text me-3">{dashboardStats.newestScan.toLocaleDateString()}</span> Most Recent Scan</p>)}
195+
</div>
191196
</div>
192-
))}
197+
198+
{/* <h2>Course Statistics</h2>
199+
<p>Total Courses: {dashboardStats.totalCourses}</p>
200+
<p>Scanned Courses: {dashboardStats.scannedCourses}</p>
201+
<p>Unscanned Courses: {dashboardStats.totalCourses - dashboardStats.scannedCourses}</p>
202+
<p>Scan Adoption Rate: {scanPercentage}%</p>
203+
<p>Courses Scanned in Last 30 Days: {dashboardStats.recentScans}</p>
204+
205+
<h2>Instructor Statistics</h2>
206+
<p>Total Instructors: {dashboardStats.totalInstructors}</p>
207+
<p>Instructors Using UDOIT: {dashboardStats.uniqueInstructorsUsingUdoit}</p>
208+
<p>Instructor Adoption Rate: {instructorAdoption}%</p>
209+
210+
<h2>Accessibility Statistics</h2>
211+
<p>Total Accessibility Issues Found: {dashboardStats.totalErrors}</p>
212+
<p>Total Suggestions Made: {dashboardStats.totalSuggestions}</p>
213+
<p>Total Items Fixed: {dashboardStats.totalFixed}</p>
214+
<p>Total Items Resolved: {dashboardStats.totalResolved}</p>
215+
<p>Total Files Reviewed: {dashboardStats.totalFilesReviewed}</p> */}
216+
217+
</section>
218+
219+
<section className="callout-container">
220+
<p>Total Accessibility Issues Found: {dashboardStats.totalErrors}</p>
221+
<p>Total Suggestions Made: {dashboardStats.totalSuggestions}</p>
222+
<p>Total Items Fixed: {dashboardStats.totalFixed}</p>
223+
<p>Total Items Resolved: {dashboardStats.totalResolved}</p>
224+
<p>Total Files Reviewed: {dashboardStats.totalFilesReviewed}</p>
225+
{dashboardStats.scannedCourses > 0 && (
226+
<>
227+
<p>Average Issues per Scanned Course: {(dashboardStats.totalErrors / dashboardStats.scannedCourses).toFixed(1)}</p>
228+
<p>Average Files Reviewed per Course: {(dashboardStats.totalFilesReviewed / dashboardStats.scannedCourses).toFixed(1)}</p>
229+
</>
230+
)}
231+
</section>
193232
</div>
233+
234+
{dashboardStats.accountNumber > 1 && (
235+
<section className="callout-container">
236+
<h2 className="callout-heading mt-1">Department/Account Breakdown</h2>
237+
{Object.entries(dashboardStats.accountBreakdown).map(([account, stats]) => (
238+
<div key={account}>
239+
<p><strong>{account}:</strong></p>
240+
<p style={{ marginLeft: '20px' }}>Total Courses: {stats.total}</p>
241+
<p style={{ marginLeft: '20px' }}>Scanned: {stats.scanned} ({stats.total > 0 ? ((stats.scanned / stats.total) * 100).toFixed(1) : 0}%)</p>
242+
<p style={{ marginLeft: '20px' }}>Total Issues: {stats.errors}</p>
243+
</div>
244+
))}
245+
</section>
246+
)}
194247
</div>
195-
196-
<div>
197-
<button
198-
className="btn btn-primary"
199-
onClick={() => handleNavigation('courses')}
200-
>
201-
View Courses
202-
</button>
203-
</div>
204-
</div>
248+
</>
205249
)
206250
}

‎assets/js/Components/HomePage.css‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -71,31 +71,31 @@
7171
width: 30%;
7272
min-width: 11em;
7373
flex-shrink: 0;
74+
}
7475

75-
.svg-container {
76-
position: relative;
77-
width: fit-content;
78-
79-
.progress-text-container {
80-
position: absolute;
81-
width: 100%;
82-
height: 100%;
83-
top: 0;
84-
left: 0;
76+
.svg-container {
77+
position: relative;
78+
width: fit-content;
8579

86-
.progress-text {
87-
width: 100%;
88-
text-align: center;
89-
font-weight: 600;
90-
font-size: 1.25em;
91-
margin-top: -.5em;
92-
}
93-
}
80+
.progress-text-container {
81+
position: absolute;
82+
width: 100%;
83+
height: 100%;
84+
top: 0;
85+
left: 0;
9486
}
87+
}
9588

96-
.count-summary {
97-
margin-top: -.5rem;
98-
}
89+
.progress-text {
90+
width: 100%;
91+
text-align: center;
92+
font-weight: 600;
93+
font-size: 1.25em;
94+
margin-top: -.5em;
95+
}
96+
97+
.count-summary {
98+
margin-top: -.5rem;
9999
}
100100

101101
.step-summary {

0 commit comments

Comments
 (0)