init dashboard redesign

src/modules/feature/FeatureStep.vue

@@ -34,7 +34,7 @@ const isLive = computed(
   <li class="feature-step">
     <header>{{ step.title }}</header>
     <section class="doing">
-      <h5>📝⌛ [{{ featuresInProgress.length }}]</h5>
+      <h5>⚒️ [{{ featuresInProgress.length }}]</h5>
       <ul v-if="hasFeaturesInProgress">
         <li v-for="feature in featuresInProgress" :key="feature.name">
           <Starport
@@ -47,7 +47,7 @@ const isLive = computed(
       </ul>
     </section>
     <section class="done">
-      <h5>📝✅ [{{ featuresDone.length }}]</h5>
+      <h5>✅ [{{ featuresDone.length }}]</h5>
       <div>
         <div v-if="!isLive" class="blue-bin-container">
           <div

src/modules/feature/FlowDashboard.vue

@@ -2,6 +2,7 @@
 import ProblemSolvingIcon from '@/icons/ProblemSolvingIcon.vue'
 import PullSystemIcon from '@/icons/PullSystemIcon.vue'
 import PushSystemIcon from '@/icons/PushSystemIcon.vue'
+import SeparatorIcon from '@/icons/SeparatorIcon.vue'
 import { useFeatureStore } from '@/modules/feature/feature-store'
 
 const featureStore = useFeatureStore()
@@ -9,38 +10,113 @@ const featureStore = useFeatureStore()
 
 <template>
   <div class="flow-dashboard">
-    <div>
+    <div class="row cards">
-      {{ featureStore.totalFeaturesDone }} /
+      <div class="card">
-      {{ featureStore.totalFeaturesCount }} features in the board | mean
+        Features
-      complexity : {{ featureStore.meanComplexity }} | mean lead time :
+        <span class="numeric">
-      {{ featureStore.meanLeadTime }} days | Total days:
+          {{ featureStore.totalFeaturesDone }}/<span class="sub">
-      {{ featureStore.meta.totalDays }} | Team work experience:
+            {{ featureStore.totalFeaturesCount }}
-      {{ featureStore.meta.teamWorkExperience.toFixed(2) }}
+          </span>
-    </div>
+        </span>
-    <div class="row">
-      New feature live every {{ featureStore.taktTime }} days. Finishing in
-      {{ featureStore.eat }} days.
-    </div>
-    <template v-if="!featureStore.isProjectFinished">
-      <div class="row">Strategy of the day:</div>
-      <div class="row">
-        <button @click="featureStore.nextDay('push')">
-          <PushSystemIcon color="white" />
-        </button>
-        <button @click="featureStore.nextDay('pull')">
-          <PullSystemIcon color="white" />
-        </button>
-        <button @click="featureStore.nextDay('problem-solving')">
-          <ProblemSolvingIcon color="white" />
-        </button>
       </div>
-    </template>
+      <div class="card">
+        Team work exp.
+        <span class="numeric">
+          {{ featureStore.meta.teamWorkExperience.toFixed(2) }}
+        </span>
+      </div>
+      <div class="card">
+        Mean complexity
+        <div class="numeric">{{ featureStore.meanComplexity }}</div>
+      </div>
+      <div class="card">
+        Mean lead time
+        <div class="data">
+          <span class="numeric">{{ featureStore.meanLeadTime }}</span>
+          days
+        </div>
+      </div>
+      <div class="card">
+        Days
+        <div class="data">
+          <span class="numeric">{{ featureStore.meta.totalDays }}</span
+          >d
+        </div>
+      </div>
+      <div class="card">
+        Takt time
+        <div class="data">
+          <span class="numeric">{{ featureStore.taktTime }}</span>
+          days
+        </div>
+      </div>
+      <div class="card">
+        ETA
+        <div class="data">
+          <span class="numeric">{{ featureStore.eat }}</span>
+          days
+        </div>
+      </div>
+    </div>
+    <SeparatorIcon />
+    <div class="row">
+      <button
+        @click="featureStore.nextDay('push')"
+        :disabled="featureStore.isProjectFinished"
+      >
+        <PushSystemIcon color="white" />
+      </button>
+      <button
+        @click="featureStore.nextDay('pull')"
+        :disabled="featureStore.isProjectFinished"
+      >
+        <PullSystemIcon color="white" />
+      </button>
+      <button
+        @click="featureStore.nextDay('problem-solving')"
+        :disabled="featureStore.isProjectFinished"
+      >
+        <ProblemSolvingIcon color="white" />
+      </button>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
 .flow-dashboard {
-  color: black;
   font-size: 16pt;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .row {
+    display: flex;
+    justify-content: center;
+  }
+
+  .sub {
+    font-size: 12pt;
+  }
+
+  .cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .card {
+    background-color: #f7d794;
+    padding: 0 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .numeric {
+      flex: 1;
+    }
+  }
 }
 </style>