Dashboiard Manager : measure planned init

resources/js/components/Dashboard/ManagerView/Components/ActionPlanTable.vue

@@ -11,7 +11,9 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-if="!actions.length">Vide</tr>
+                    <tr v-if="!actions || !actions.length">
+                        <td colspan="3">Aucune action</td>
+                    </tr>
                     <tr v-for="item in actions" :key="item.id">
                         <td>{{ item.level.actual_label }}</td>
                         <td>{{ item.end_date }}</td>
@@ -48,14 +50,4 @@ export default {
         }
     }
 }
-</script>
-<style scoped>
+</script>
\ No newline at end of file
-.card.flex-row {
-    height: 120px;
-}
-.bg-primary {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-</style>
\ No newline at end of file

resources/js/components/Dashboard/ManagerView/Components/ActionTerritory.vue

+<template>
+    <div class="card py-3 px-2">
+        <div class="card-title mb-3"> Actions par territoire</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ActionTerritory',
+    props : [],
+    data () {
+        return {
+        }
+    },
+    computed: {
+
+    }
+}
+</script>
\ No newline at end of file

resources/js/components/Dashboard/ManagerView/Components/MeasurePlanned.vue

+<template>
+    <div class="card py-3 px-2">
+        <div class="card-title mb-3"> Top 3 des niveaux de mesures de sécurité planifiées</div>
+
+        <div class="card flex-row">
+            <div class="col-2 bg-primary font-weight-bold">
+                <span style="font-size: 50px;">1</span>
+            </div>
+            <div class="card-body col-10 py-2">
+                <div class="card-text">
+                    Nom court de la mesure
+                    <div class="small font-weight-bold">Niveau X</div>
+                </div>
+                <div class="progress progress-xs my-1">
+                    <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
+                <div class="card-text">
+                    94 % des structures
+                </div>
+            </div>
+        </div>
+
+        <div class="card flex-row">
+            <div class="col-2 bg-primary font-weight-bold">
+                <span style="font-size: 50px;">2</span>
+            </div>
+            <div class="card-body col-10 py-2">
+                <div class="card-text">
+                    Nom court de la mesure
+                    <div class="small font-weight-bold">Niveau X</div>
+                </div>
+                <div class="progress progress-xs my-1">
+                    <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
+                <div class="card-text">
+                    94 % des structures
+                </div>
+            </div>
+        </div>
+
+        <div class="card flex-row">
+            <div class="col-2 bg-primary font-weight-bold">
+                <span style="font-size: 50px;">3</span>
+            </div>
+            <div class="card-body col-10 py-2">
+                <div class="card-text">
+                    Nom court de la mesure
+                    <div class="small font-weight-bold">Niveau X</div>
+                </div>
+                <div class="progress progress-xs my-1">
+                    <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuemin="0" aria-valuemax="100"></div>
+                </div>
+                <div class="card-text">
+                    94 % des structures
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+/* nombre de niveau de mesures de sécurité mis en œuvre /30)*100 */
+export default {
+    name: 'MeasureCard',
+    props : [],
+    data () {
+        return {
+        }
+    },
+    computed: {
+
+    }
+}
+</script>
+<style scoped>
+.card.flex-row {
+    height: 120px;
+}
+.bg-primary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>
\ No newline at end of file

resources/js/components/Dashboard/ManagerView/index.vue

@@ -24,6 +24,12 @@
                 <div class="col-md-6">
                     <AverageMaturityCyberCard />
                 </div>
+                <div class="col-md-12">
+                    <MeasurePlanned />
+                </div>
+                <div class="col-md-12">
+                    <ActionTerritory />
+                </div>
             </div>
         </div>
     </div>
@@ -44,6 +50,8 @@ export default {
         OrganizationsCard: () => import('./Components/OrganizationsCard.vue'),
         AverageMaturityCyberCard: () => import('./Components/AverageMaturityCyberCard.vue'),
         ActionPlanTable: () => import('./Components/ActionPlanTable.vue'),
+        MeasurePlanned: () => import('./Components/MeasurePlanned.vue'),
+        ActionTerritory: () => import('./Components/ActionTerritory.vue'),
     },
     computed: {
         user () {