Feature/FOUR-11539: Process Launchpad - Tabs - Default

resources/js/processes-catalogue/components/DefaultTab.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="d-flex align-items-center justify-content-center flex-column tab-container">
+    <img
+      :src="imageSrc"
+      :alt="altText"
+    />
+    <div class="text-center">
+      <strong>{{ titleText }}</strong>
+    </div>
+    <div class="text-center">
+      {{ descriptionText }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    imageSrc: {
+      type: String,
+      default: "/img/tasks-loading.svg",
+    },
+    altText: {
+      type: String,
+      default: "",
+    },
+    titleText: {
+      type: String,
+      default: "",
+    },
+    descriptionText: {
+      type: String,
+      default: "",
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tab-container {
+    width: auto;
+    height: 622px;
+    background-color: white;
+  }
+</style>

resources/js/processes-catalogue/components/ProcessInfo.vue

@@ -31,7 +31,9 @@
             <process-options :process="process" />
           </b-col>
         </div>
-        <b-col cols="12"> Process Tab </b-col>
+        <b-col cols="12">
+          <process-tab></process-tab>
+        </b-col>
       </b-col>
     </b-row>
   </div>
@@ -43,6 +45,7 @@ import ProcessesCarousel from "../components/ProcessesCarousel.vue";
 import ProcessMap from "./ProcessMap.vue";
 import ProcessOptions from "./ProcessOptions.vue";
 import Breadcrumbs from "./Breadcrumbs.vue";
+import ProcessTab from './ProcessTab.vue';
 
 export default {
   components: {
@@ -51,6 +54,7 @@ export default {
     ProcessMap,
     MenuCatologue,
     ProcessesCarousel,
+    ProcessTab,
   },
   props: ["process", "permission", "isDocumenterInstalled", "currentUserId", "category"],
   data() {

resources/js/processes-catalogue/components/ProcessTab.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="mt-3">
+    <b-tabs content-class="mt-3 text-style">
+      <b-tab
+        title="My Requests"
+        active
+      >
+        <default-tab
+          :altText="$t('No Image')"
+          :titleText="$t('You have made no requests of this process.')"
+          :descriptionText="$t('All your requests will be shown here')"
+        />
+      </b-tab>
+      <b-tab title="My Tasks">
+        <default-tab
+          :altText="$t('No Image')"
+          :titleText="$t('You have no tasks from this process')"
+          :descriptionText="
+            $t('All your tasks related to this process will be shown here.')
+          "
+        />
+      </b-tab>
+    </b-tabs>
+  </div>
+</template>
+
+<script>
+import DefaultTab from "./DefaultTab.vue";
+export default {
+  components: { DefaultTab },
+};
+</script>
+<style>
+.text-style {
+  margin-bottom: 10px;
+  color: #556271;
+}
+</style>

resources/js/processes-catalogue/components/ProcessesCarousel.vue

@@ -5,6 +5,7 @@
       v-model="slide"
       :interval="interval"
       indicators
+      img-height="400px"
       @sliding-start="onSlideStart"
       @sliding-end="onSlideEnd"
     >