From 8937e09436fddf5ece5567398c34998d0ebb2655 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Tue, 22 Mar 2022 12:11:00 +0100
Subject: [PATCH] Added placeholder components and skeleton for dashboard 5
 prototype

refs https://github.com/TryGhost/Team/issues/1432
---
 .../app/components/dashboard/dashboard-v5.hbs | 55 ++++++++++++++++---
 .../dashboard/v5/members-counts.hbs           | 16 ++++++
 .../components/dashboard/v5/members-counts.js |  7 +++
 .../components/dashboard/v5/members-email.hbs | 20 +++++++
 .../components/dashboard/v5/members-email.js  |  7 +++
 .../dashboard/v5/members-engagement.hbs       | 13 +++++
 .../dashboard/v5/members-engagement.js        |  7 +++
 ghost/admin/app/styles/layouts/dashboard.css  | 43 ++++++++++++++-
 8 files changed, 159 insertions(+), 9 deletions(-)
 create mode 100644 ghost/admin/app/components/dashboard/v5/members-counts.hbs
 create mode 100644 ghost/admin/app/components/dashboard/v5/members-counts.js
 create mode 100644 ghost/admin/app/components/dashboard/v5/members-email.hbs
 create mode 100644 ghost/admin/app/components/dashboard/v5/members-email.js
 create mode 100644 ghost/admin/app/components/dashboard/v5/members-engagement.hbs
 create mode 100644 ghost/admin/app/components/dashboard/v5/members-engagement.js

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 @@
 <section>
     {{#if this.areMembersEnabled}}
-        <Dashboard::MembersGraphs />
+        <section class="prototype-section">
+            <Dashboard::V5::MembersCounts />
+        </section>
 
-        {{#if this.hasPaidTiers}}
+        <section class="prototype-section">
             <article class="gh-dashboard-box">
-                These are some paid members related graphs
+                Dropdown: 7d/30d/90d/all time
             </article>
-        {{/if}}
+
+            <article class="gh-dashboard-box">
+                Total members graph
+            </article>
+
+            {{#if this.hasPaidTiers}}
+                <article class="gh-dashboard-box">
+                    MRR graph
+                </article>
+
+                <article class="gh-dashboard-box">
+                    Total paid graph
+                </article>
+
+                <article class="gh-dashboard-box">
+                    Paid members graph (new, canceled)
+                </article>
+
+                <article class="gh-dashboard-box">
+                    Paid mix with cadence or tiers segmented control
+                </article>
+            {{/if}}
+        </section>
+        <section class="prototype-section">
+            <Dashboard::V5::MembersEngagement />
+        </section>
     {{/if}}
 
     {{#if this.areNewslettersEnabled}}
-        <article class="gh-dashboard-box">
-            These are newsletter related graphs
-        </article>
+        <section class="prototype-section">
+            <Dashboard::V5::MembersEmail />
+        </section>
     {{/if}}
+
+    <section class="prototype-section">
+        <h2>Recent posts</h2>
+        <article class="gh-dashboard-box">
+            Recent posts
+        </article>
+    </section>
+
+    <section class="prototype-section">
+        <h2>Activity</h2>
+        <article class="gh-dashboard-box">
+            Activity feed
+        </article>
+    </section>
 </section>
 
 <div class="gh-main-section prototype-panel">
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 @@
+<div class="prototype-counts">
+    <div class="prototype-box">
+        <div class="number">10.000</div>
+        <div>Total members</div>
+    </div>
+
+    <div class="prototype-box">
+        <div class="number">1.500</div>
+        <div>Paid members</div>
+    </div>
+
+    <div class="prototype-box">
+        <div class="number">8.500</div>
+        <div>Free members</div>
+    </div>
+</div>
\ 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 @@
+<h2>Email</h2>
+
+<div class="prototype-counts">
+    <div class="prototype-counts col">
+        <div class="prototype-box">
+            <div class="number">{{this.subscribersCount}}</div>
+            <div>Newsletter Subscribers</div>
+        </div>
+
+        <div class="prototype-box">
+            <div class="number">40.3k</div>
+            <div>Emails sent in the past 30 days</div>
+        </div>
+    </div>
+
+    <div class="prototype-box">
+        Email open rate graph
+    </div>
+</div>
+
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 @@
+<h2>Engagement</h2>
+
+<div class="prototype-counts">
+    <div class="prototype-box">
+        <div class="number">67%</div>
+        <div>Engaged in past 30 days</div>
+    </div>
+
+    <div class="prototype-box">
+        <div class="number">31%</div>
+        <div>Engaged in past 7 days</div>
+    </div>
+</div>
\ 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;
+}
+