home

/

writing

/

device-management-portal

introduction

This project was developed for a client at Trinity. They needed a multi-tenant system providing separate interfaces for both the client and their customers to manage devices on the Trinity Network. As design lead, I focused primarily on frontend implementation with some backend work. The project uses Next.js, TailwindCSS, Django, Postgres, and MongoDB.

dashboard

Displays the overall status of the estate, either in its entirety or filtered by a specific company.
notion image
CMD K - Global Search Interaction: Find devices from any screen using the predefined filters.
CMD K - Global Search Interaction: Find devices from any screen using the predefined filters.
 
Click on graph element to navigate to that subset of data.
Click on graph element to navigate to that subset of data.
 

hardware list (sites)

Find devices by searching or filtering on specific data fields.
notion image
Filter current type by name, UID or P1 Code.
 
Table columns filtering.
 
Data filtering based on properties.

hardware list (base-stations)

Find devices by searching or filtering on specific data fields.
notion image
Hardware list add a new device.
Preview device data before navigation.

hardware overview (site)

Interact with an individual device, browse historic events.
notion image
Individual hardware item details configuration.
 
Other configuration settings.
 
Alarm event interactions.

hardware overview (base-station)

Interact with an individual device, browse historic events.
notion image
 

company

Edit details of a tenant company, manage folders for devices.
notion image
Company edit general details.
Company create folders.

company (members)

Manage member roles and data attributes, invite new members.
notion image
Company members overview.
Company members invite.

personal profile

Edit personal details and view tenant membership roles.
notion image
Personal profile edit details.