diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.hbs b/ghost/admin/app/components/dashboard/dashboard-v5.hbs index 41cb2f6623..1f8e3607a7 100644 --- a/ghost/admin/app/components/dashboard/dashboard-v5.hbs +++ b/ghost/admin/app/components/dashboard/dashboard-v5.hbs @@ -1,19 +1,60 @@
{{#if this.areMembersEnabled}} - +
+ +
- {{#if this.hasPaidTiers}} +
- These are some paid members related graphs + Dropdown: 7d/30d/90d/all time
- {{/if}} + +
+ Total members graph +
+ + {{#if this.hasPaidTiers}} +
+ MRR graph +
+ +
+ Total paid graph +
+ +
+ Paid members graph (new, canceled) +
+ +
+ Paid mix with cadence or tiers segmented control +
+ {{/if}} +
+
+ +
{{/if}} {{#if this.areNewslettersEnabled}} -
- These are newsletter related graphs -
+
+ +
{{/if}} + +
+

Recent posts

+
+ Recent posts +
+
+ +
+

Activity

+
+ Activity feed +
+
diff --git a/ghost/admin/app/components/dashboard/v5/members-counts.hbs b/ghost/admin/app/components/dashboard/v5/members-counts.hbs new file mode 100644 index 0000000000..577ce224d7 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/members-counts.hbs @@ -0,0 +1,16 @@ +
+
+
10.000
+
Total members
+
+ +
+
1.500
+
Paid members
+
+ +
+
8.500
+
Free members
+
+
\ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/v5/members-counts.js b/ghost/admin/app/components/dashboard/v5/members-counts.js new file mode 100644 index 0000000000..714cb250f6 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/members-counts.js @@ -0,0 +1,7 @@ +import Component from '@glimmer/component'; + +export default class MembersCounts extends Component { + get placeholderGetter() { + return '9.150'; + } +} diff --git a/ghost/admin/app/components/dashboard/v5/members-email.hbs b/ghost/admin/app/components/dashboard/v5/members-email.hbs new file mode 100644 index 0000000000..ec36b7ca21 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/members-email.hbs @@ -0,0 +1,20 @@ +

Email

+ +
+
+
+
{{this.subscribersCount}}
+
Newsletter Subscribers
+
+ +
+
40.3k
+
Emails sent in the past 30 days
+
+
+ +
+ Email open rate graph +
+
+ diff --git a/ghost/admin/app/components/dashboard/v5/members-email.js b/ghost/admin/app/components/dashboard/v5/members-email.js new file mode 100644 index 0000000000..ca592954aa --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/members-email.js @@ -0,0 +1,7 @@ +import Component from '@glimmer/component'; + +export default class MembersEmail extends Component { + get subscribersCount() { + return '9.150'; + } +} diff --git a/ghost/admin/app/components/dashboard/v5/members-engagement.hbs b/ghost/admin/app/components/dashboard/v5/members-engagement.hbs new file mode 100644 index 0000000000..e7be03fd8a --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/members-engagement.hbs @@ -0,0 +1,13 @@ +

Engagement

+ +
+
+
67%
+
Engaged in past 30 days
+
+ +
+
31%
+
Engaged in past 7 days
+
+
\ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/v5/members-engagement.js b/ghost/admin/app/components/dashboard/v5/members-engagement.js new file mode 100644 index 0000000000..4ed503ad81 --- /dev/null +++ b/ghost/admin/app/components/dashboard/v5/members-engagement.js @@ -0,0 +1,7 @@ +import Component from '@glimmer/component'; + +export default class MembersEngagement extends Component { + get placeholderGetter() { + return '9.150'; + } +} diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css index c17912e587..7e71242be8 100644 --- a/ghost/admin/app/styles/layouts/dashboard.css +++ b/ghost/admin/app/styles/layouts/dashboard.css @@ -1078,5 +1078,44 @@ a.gh-dashboard-container { /* Temporary section for prototype convenience */ .prototype-panel { /* Keep it out of view */ - margin-top: 100vh; -} \ No newline at end of file + margin-top: 50vh; +} + +.prototype-counts { + display: flex; + flex-direction: row; + align-items: stretch; + gap: 28px; +} + +.prototype-section { + margin-bottom: 40px; +} + +.prototype-section > h2 { + font-size: 1.65rem; + font-weight: 600; + line-height: 1.4em; + margin-bottom: 8px; + color: var(--black); +} + +.prototype-counts.col { + flex-direction: column; +} + +.prototype-counts > * { + flex-grow: 1; + min-width: 0; + flex-basis: 0; +} + +.prototype-box { + border: 1px solid #ebeef0; + padding: 28px; +} + +.prototype-box .number { + font-size: 24px; +} +