style(kong): change data store resource manager to tab view

components/MenuHeader.vue

@@ -40,12 +40,12 @@ const items = ref([
     icon: "pi pi-warehouse",
     items: [
       {
-        label: "List Data Stores",
-        icon: "pi pi-database",
+        label: "List Resources",
+        icon: "pi pi-list",
         route: "/data-stores",
       },
       {
-        label: "Create Data Store",
+        label: "Manage Links",
         icon: "pi pi-plus",
         route: "/data-stores/create",
       },

components/data-stores/DataStoreListLayout.vue

@@ -80,8 +80,8 @@ function extractProjectIdFromPath(paths: string[]): string {
 </script>
 
 <template>
-  <div class="card">
-    <TabView style="margin-top: 40px">
+  <div class="card tabCard">
+    <TabView>
       <TabPanel header="Detailed Data Store View">
         <DetailedDataStoreTable :stores="dataStores" />
       </TabPanel>

components/data-stores/ResourceManagerLayout.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import DataStoreCreator from "~/components/data-stores/managers/DataStoreCreator.vue";
+import ProjectBinder from "~/components/data-stores/managers/ProjectBinder.vue";
+import AnalysisBinder from "~/components/data-stores/managers/AnalysisBinder.vue";
+</script>
+
+<template>
+  <div class="card tabCard">
+    <TabView>
+      <TabPanel header="Create a Data Store">
+        <DataStoreCreator />
+      </TabPanel>
+      <TabPanel header="Bind a Project to a Data Store">
+        <ProjectBinder />
+      </TabPanel>
+      <TabPanel header="Link an Analysis to a Project">
+        <AnalysisBinder />
+      </TabPanel>
+    </TabView>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

pages/data-stores/create.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
-import DataStoreCreator from "~/components/data-stores/managers/DataStoreCreator.vue";
-import ProjectBinder from "~/components/data-stores/managers/ProjectBinder.vue";
-import AnalysisBinder from "~/components/data-stores/managers/AnalysisBinder.vue";
+import ResourceManagerLayout from "~/components/data-stores/ResourceManagerLayout.vue";
 
 definePageMeta({
   middleware: ["auth"],
 });
 </script>
 
 <template>
-  <DataStoreCreator />
-  <ProjectBinder />
-  <AnalysisBinder />
+  <ResourceManagerLayout />
 </template>
 
 <style scoped lang="scss"></style>

pages/index.vue

@@ -18,7 +18,7 @@ import KeycloakAuth from "~/components/KeycloakAuth.vue";
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
 #home {
   display: flex;
   justify-content: center;
@@ -41,4 +41,8 @@ import KeycloakAuth from "~/components/KeycloakAuth.vue";
 .row {
   display: flex;
 }
+
+.tabCard {
+  margin-top: 40px;
+}
 </style>