How to create a custom dashboard in the Umbraco backoffice

{
  "$schema": "../../../umbraco-package-schema.json",
  "name": "Team Welcome",
  "version": "1.0.0",
  "extensions": [
    {
      "type": "dashboard",
      "alias": "MySite.Dashboard.TeamWelcome",
      "name": "Team Welcome Dashboard",
      "element": "/App_Plugins/TeamWelcome/welcome-dashboard.js",
      "weight": 100,
      "meta": {
        "label": "Team Welcome",
        "pathname": "team-welcome"
      },
      "conditions": [
        { "alias": "Umb.Condition.SectionAlias", "match": "Umb.Section.Content" }
      ]
    }
  ]
}

import { LitElement, html, css } from "@umbraco-cms/backoffice/external/lit";
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
import { UMB_CURRENT_USER_CONTEXT } from "@umbraco-cms/backoffice/current-user";

export class TeamWelcomeDashboard extends UmbElementMixin(LitElement) {
    static properties = { _name: { state: true } };

    constructor() {
        super();
        this._name = "";
        // Read the signed-in user from the backoffice context
        this.consumeContext(UMB_CURRENT_USER_CONTEXT, (context) => {
            this.observe(context?.currentUser, (user) => (this._name = user?.name ?? ""));
        });
    }

    render() {
        return html`
            <uui-box headline="Welcome back${this._name ? `, ${this._name}` : ""}">
                <p>Here's what to check before you publish:</p>
                <ul>
                    <li>Every page has a meta description</li>
                    <li>Images have alt text</li>
                    <li>Links work and point to the right pages</li>
                </ul>
                <uui-button look="primary" href="/umbraco/section/content">Go to content</uui-button>
            </uui-box>
        `;
    }

    static styles = css`
        :host { display: block; padding: var(--uui-size-layout-1); }
        ul { line-height: 1.8; }
    `;
}

customElements.define("team-welcome-dashboard", TeamWelcomeDashboard);
export default TeamWelcomeDashboard;