# Dashboard overview

The dashboard is a browser application allowing:

- _Hosts_ to upload and manage their shows.
- _Programme Managers_ to manage the radio station and its programme.

## Requirements

Dashboard is currently supported by these browsers:

- Chrome 115+
- Firefox 122+

At the moment mobile browsers are not supported.

## Login & logout

First choose the language you want Dashboard use with.

![Language Picker](../_static/screenshots/dashboard-language.png)

Then click the _Sign In_ button to open your personal dashboard.

Use the credentials provided by your radio station.

![Dashboard Login Page](../_static/screenshots/dashboard-login.png)

After login you see your profile badge on the left top. Within that badge, click the icon on the
right to sign out again.

![User Profile Badge](../_static/screenshots/dashboard-user-badge.png)

## Navigation

### Sidebar

Use the navigation in the sidebar to navigate the Dashboard.

There are two main areas and their child pages:

- Shows: Displays a list of shows.
  - Episodes & Schedules: Here you can manage the broadcasting information of a specific show.
  - Show Settings: Configure the settings of the show here.
- Calendar: The calendar for programme planning.

<img src="../_static/screenshots/dashboard-nav-sidebar.png" width="35%" alt="Sidebar navigation" />

### Breadcrumb

Use the breadcrumb to quickly navigate to parent pages.

<img src="../_static/screenshots/dashboard-nav-breadcrumb.png" width="80%" alt="Breadcrumb navigation" />

## Inline editor for formatting text

Some fields feature an inline editor, allowing you to apply minor formatting. Those formatting
options include:

- Bold text
- Italic text
- Strikethrough
- Bullet points
- Numbered lists
- Links

When entering URLs, they are automatically rendered as valid links. For your convenience you can
even copy & paste pre-formatted text and its formatting is preserved.

To use the editor simply select the relevant text and a pop-over menu appears.

<img src="../_static/screenshots/dashboard-inline-formatting.png" width="60%" alt="Inline formatting" />

## Automatic saving

Looking for save buttons? Search no more!

Any changes to form data is automatically transmitted to the server. When some automatic saving
is in progress, this is indicated by a _saving..._ icon, located next to the form element.

![Automatic Saving Indicator](../_static/screenshots/dashboard-auto-save.png)

Changes affecting the appearance of Dashboard are saved to your browsers local storage. Next time
you login to Dashboard they are applied automatically.

## Information on data changes

Some pages display information about the date and time the record was created and when it was
last updated. Depending on the page this information is located at the header or footer of the
page.

<img src="../_static/screenshots/dashboard-metadata.png" width="80%" alt="Metadata indicating create and change date" />

## Additional info in the footer

Scroll down to display the hidden footer of Dashboard.

The **Dashboard version** can be found on the far left of the footer. When reporting bugs you will
be asked about the browser, its version and the current Dashboard application version in use.

**Help & documentation** links to the reference documentation you are currently reading. In the
future we will provide a more seamlessly integrated and refined documentation option in Dashboard.

<img src="../_static/screenshots/dashboard-footer.png" width="80%" alt="Info in the dashboard footer" />