Joerns HealthCare App

The Design

This is a web app which was created for keeping track of products' development changes. I used a MERN stack, with a bit of Vanilla Javascript.

Most of the UI elements were created from scratch. The logo was designed in Inkscape, and for the icons I used React Icons.

The app is only accessible for people within the company. There are four different account types;

User - for people who are approving documents
Editor - creators of the documents
Guest - for anyone within the company who wants access, just to search the database
Admin - can access all parts of the website

The "All Dco's" page is available for every account. The edit/delete features are only available/visible for the admin.

The main features include:

All users have access to the help page and can logout from the app 1. The settings include a dark/light theme mode. Additionaly, the admin account has access to the dashboard page.
The Search form 3, has an option to filter documents by their status (pending, approved, rejected), using alphabetical order (a-z or z-a) or by their date (newest / oldest). In the field box 2, the user can search for documents by their Title.
The Comments section is hidden by default, and can be accessed by clicking on the speech bubble 4.
The Changes section includes a link to a pdf form 5. The pdf form will pop up on a new tab.
The Text 6 under the Title will change its status if all users have approved it or if the document is rejected.
The Status bar 7 indicates who has already approved the document (green) and who rejected it (red). Hovering over any of the squares will show the name of the approver. Additionally, if any of the users reject the document, it won't be available for others in their Inbox, until the creator of the document updates it.

Depending on the account type, some features won't be accessible/visible.

Search results are paginated 8, with six results per page.

This is only available for the admin and editor accounts.

The main features:

A DCO number 1 will be generated each time an editor/admin creates a new document.
The Part list section 2 has a button to add additional field boxes if needed. To remove an unwanted field, the user needs to hover over the left side of the field and press the minus symbol.
When adding a file, the user will get a small preview 3. Depending on the browser, the user may get some additional functionality (zoom in/out etc). Adding files is restricted to only one pdf.

Edit functionality is only available for the editors of the documents and it's accessible through the Inbox page.

This is mostly for the users and editors. Depending on the account type, some features will have different appearances.

The main features:

When a document is submitted 1, it will disappear from that user's Inbox. The editors of that document will still have access to it, until all users have approved it.
The approvers can add comments 2 to the document before submitting it. The comments are optional when approving it and are only required if the users reject it.
If the document is rejected, it won't be available/visible to others users. The editor needs to update it first. After updating the document, the status bar will be reset to default (grey squres) 3. The only part which is not reset is the comments section 4.

The Inbox page for the editors of the documents looks very simillar to the Inbox page for approvers. The only changes are the edit/delete buttons 1.

Includes the favourite documents of each user.

It has a few basic features.

Hamburger menu 1, with a modal version of the side menu 2.
Depending on the screen size and the display results 3, the amount of columns can vary. There are three columns on desktop, two columns on tablets and one column on mobile.