members dashboard

src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.element.ts

@@ -0,0 +1,28 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+@customElement('umb-dashboard-members-welcome')
+export class UmbDashboardMembersWelcomeElement extends LitElement {
+	static styles = [UUITextStyles, css``];
+
+	render() {
+		return html`
+			<uui-box>
+				<h1>Hours of Umbraco training videos are only a click away</h1>
+				<p>
+					Want to master Umbraco? Spend a few minutes learning some best practices by visiting the Umbraco Learning Base
+					Youtube channel. Here you can find a bunch of video material coverings many aspects of Umbraco.
+				</p>
+			</uui-box>
+		`;
+	}
+}
+
+export default UmbDashboardMembersWelcomeElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-dashboard-members-welcome': UmbDashboardMembersWelcomeElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/members/dashboards/welcome/dashboard-members-welcome.stories.ts

@@ -0,0 +1,16 @@
+import './dashboard-members-welcome.element';
+
+import { Meta, Story } from '@storybook/web-components';
+import { html } from 'lit-html';
+
+import type { UmbDashboardMembersWelcomeElement } from './dashboard-members-welcome.element';
+
+export default {
+	title: 'Dashboards/Welcome',
+	component: 'umb-dashboard-welcome',
+	id: 'umb-dashboard-welcome',
+} as Meta;
+
+export const AAAOverview: Story<UmbDashboardMembersWelcomeElement> = () =>
+	html` <umb-dashboard-members-welcome></umb-dashboard-members-welcome>`;
+AAAOverview.storyName = 'Overview';

src/Umbraco.Web.UI.Client/src/backoffice/members/section.manifests.ts

@@ -1,8 +1,10 @@
-import type { ManifestSection } from '@umbraco-cms/models';
+import type { ManifestDashboard, ManifestSection } from '@umbraco-cms/models';
+
+const sectionAlias = 'Umb.Section.Members';
 
 const section: ManifestSection = {
 	type: 'section',
-	alias: 'Umb.Section.Members',
+	alias: sectionAlias,
 	name: 'Members Section',
 	weight: 400,
 	meta: {
@@ -11,4 +13,19 @@ const section: ManifestSection = {
 	},
 };
 
-export const manifests = [section];
+const dashboards: Array<ManifestDashboard> = [
+	{
+		type: 'dashboard',
+		alias: 'Umb.Dashboard.Members',
+		name: 'Members Dashboard',
+		weight: 10,
+		loader: () => import('./dashboards/welcome/dashboard-members-welcome.element'),
+		meta: {
+			label: 'Members',
+			sections: [sectionAlias],
+			pathname: 'members',
+		},
+	},
+];
+
+export const manifests = [section, ...dashboards];