Create a new layout for the admin dashboard

[calisio]

Overview

Currently, the dashboard displays recent course data and activity specific to each user, which is primarily useful for students. However, we need to develop an admin dashboard that provides an overview of the coursework's success within the facility. This admin dashboard should include more relevant information tailored to administrative needs.

Sub tickets to complete this feature

• [x] Build out admin dashboard figma for design reference (both in light and dark mode)
• [x] #275
• [x] #276
• [x] #277

Implementation

Frontend

Below is a draft of a potential frontend that could be built out for the admin dashboard. I attempted to include relevant information and graphs to illustrate the use of our platform by students.

The top graph shows the activity on our platform for the past 30 days, along with their totals displayed below it. The pie chart on the right will show the top 5 courses that students have engaged with in the past week and their summaries below. Finally, the graph on the bottom left shows the number of milestones completed for each course in the past week.

I am open to suggestions on what visualizations should be prioritized. I am especially looking for feedback on what kind of information we could compare in the bar graph on the bottom left, since I feel like that graph is displaying a similar comparison that already will be displayed in the pie chart on the right.

The Figma for this image is available to view here. All needed information for this frontend should be available in the database already.

Backend

In order to implement this feature, we will need to incorporate facilities into our architecture. This means that there will be a new database table that keeps track of all facilities that use our platform. Each user (students and admins alike) and program would then be associated with a facility.

type Facilities struct {
    DatabaseFields // includes ID, CreatedAt, UpdatedAt, DeletedAt
    Name   string
}

Additional information

Preston has recently built an application that dealt with facilities in a very similar way we are hoping to. @PThorpe92, could you comment briefly on how that worked in your application? From my understanding, it was by passing the facility ID through a token which would alter the UI shown, but would love some more details on that.

As mentioned by Paul during sprint planning, we are not considering what it would look like for a higher level state view of this. For now, we are focusing on simply one facility associated to one user.

[PThorpe92]

Steps to implement this on the Back-end:

1. A facilities table is added, and a foreign key facility_id is added to the users and provider_platforms tables.

2. A set of handlers is added for the Admin UI, to query data relevant to each or all facilities, as would be expected.

3. The JWT claims will be extended to include the users appropriate facility_id field.

4. A method is created on the Server that pulls the facility_id from the JWT, so it can be called and accessed from the handlers.

5. The existing handlers (users, programs, provider_platforms, etc), will be changed to call this method and pass it to the database query, to select only the relevant data per that facility_id it extracts from the JWT.

6. A state-level administrator (who we will determine has this access from the Role in the JWT), will have access to the Admin UI, which is making calls that will query across facilities, or they can select a facility to view the normal UI in the context of that facility. e.g. When selected, it will swap out the admin's JWT for one with the updated facility_id, and the product will function as normal.

This allows for minimal changes to be made to the existing tables, schema, handlers, etc while still providing the multi-tenancy features we need.