Skip to content

Navigation Guide

Joseph A. M. edited this page Mar 27, 2026 · 1 revision

Navigation Guide

This page explains every part of the interface and how to move around the tool. You do not need any prior experience with compliance tools or security dashboards to follow this guide.


The header

The header is the dark bar at the top of the screen. It stays visible at all times as you scroll. It contains three controls.

The shield icon and title

On the far left is the MDE Audit Tracker logo and title. Clicking this does nothing — it is just a label that tells you which tool you are using.

The framework switcher

In the centre of the header is a button showing the name of the currently active view (for example, "Overview" or "NIST CSF 2.0"). Clicking this opens the framework dropdown.

The dropdown is divided into two groups:

Dashboard

  • Overview — the main landing page showing all frameworks at once
  • Gap Analysis — the comparison view, available when you have imported a baseline file

Frameworks

  • Lists all nine compliance frameworks
  • Each item shows a coloured dot matching the framework's colour, the framework name, and a live count showing how many tasks are complete out of the total (for example, 12/57)

Click any item to switch to that view. The dropdown closes automatically after selection.

The Actions button

On the far right is the Actions button. Clicking it opens a dropdown with three sections.

Reports section This section is empty by default. Individual framework pages include a Stakeholder Report button directly in the framework header.

Data section

  • Import Config — upload a previously exported JSON file to load saved progress or run a gap analysis
  • Export — download your data as a CSV spreadsheet, a full HTML report, or a JSON configuration file
  • JSON Config — preview the JSON configuration and copy or download it

Appearance section

  • Theme — a two-button toggle between Dark mode and Light mode. Dark mode uses a deep navy background and is suited to low-light environments. Light mode uses a white background and is suited to daytime use or printing.

Links section

  • Report Issue or Feature — opens the GitHub issues page where you can submit a bug report or feature request

The Overview page

The Overview page is the first thing you see when you open the tool. It has two sections.

Framework cards

Nine cards, one per framework, are shown in a grid. Each card shows:

  • The framework name and short identifier
  • A completion percentage (starts at 0%)
  • A progress bar
  • Four numbers: tasks marked Done, Active (In Progress), Blocked, and Total

Click any card to open that framework.

Framework comparison

Below the cards is a list of all nine frameworks in a single view. Each row shows the framework badge, name, a progress bar, percentage, and a breakdown of Done, Active, Blocked, High Priority, and Total tasks. There is also an Open button on each row that takes you directly into that framework.

This section is designed to work on all screen sizes. There is no horizontal scrolling.


A framework page

When you click into a framework, you see three main areas.

Framework header

At the top is a coloured banner showing the framework name, a short description of what the framework covers, and a row of six statistics: overall completion percentage, tasks done, tasks active, tasks blocked, high-priority tasks remaining, and total tasks.

In the top-right corner of this banner is the Stakeholder Report button, which generates a PDF-ready summary for non-technical stakeholders.

Category dropdown

Below the header is a dropdown labelled "All Controls". This is the category selector. Clicking it shows all the categories within the framework (for example, in NIST CSF 2.0 the categories are GV for Govern, ID for Identify, PR for Protect, and so on).

Each category in the dropdown shows:

  • The category ID and name
  • A one-line description of what the category covers
  • A done/total count
  • A small progress bar

Selecting a category from the dropdown shows only the tasks in that category. Selecting "All Controls" shows every task in the framework.

The dropdown defaults to "All Controls" every time you open a framework for the first time. If you have previously selected a category in the current session, it remembers your selection.

Task list

Below the category dropdown is the list of tasks. Each task is a card with the following elements:

  • A checkbox on the left — tick this to mark the task complete
  • The task name
  • A reference code in a small box (this is the specific control ID within the framework)
  • A priority badge showing High, Medium, or Low
  • A brief description of what the task involves
  • A "How to comply" button — click to expand step-by-step guidance
  • A status dropdown — choose from Not Started, In Progress, Complete, or Blocked
  • A priority badge on the right (repeated for quick scanning)
  • A notes text field — enter any relevant information such as ticket numbers or observations

Tasks marked as Complete are dimmed and the task name has a strikethrough line to make it easy to see what is left to do.


The Gap Analysis view

The Gap Analysis view becomes available after you import a baseline JSON file using the Import option in the Actions dropdown.

Once a baseline is loaded, the framework switcher will show "Gap Analysis" in the Dashboard section with a LIVE badge next to it. Clicking Gap Analysis opens a comparison of the uploaded baseline against your current state.

See Gap Analysis for full details on how to use this feature.


Keyboard and touch tips

  • On mobile, all dropdowns open with a single tap and close by tapping anywhere outside them
  • Opening one dropdown automatically closes any other open dropdown — you do not need to manually close them
  • The notes field on each task expands vertically as you type
  • There is no submit button anywhere — all changes save instantly and automatically

Clone this wiki locally