added tabs component, org show wip

resources/js/pages/organisations/Show.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { type BreadcrumbItem } from '@/types';
-import { Head } from '@inertiajs/vue3';
-import PlaceholderPattern from '../components/PlaceholderPattern.vue';
+import { Head, WhenVisible } from '@inertiajs/vue3';
 
-const props = defineProps({
+defineProps({
     organisation: {
         type: Object,
         required: true,
     },
+    providers: {
+        type: Array,
+        required: true,
+    },
 });
 </script>
 
@@ -17,7 +20,24 @@ const props = defineProps({
 
     <AppLayout>
         <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
-            {{ organisation }}
+            <h2 class="text-3xl font-bold tracking-tight">{{ organisation.name }}</h2>
+            <Tabs default-value="dashboard" class="w-[400px]">
+                <TabsList>
+                    <TabsTrigger value="dashboard"> Dashboard </TabsTrigger>
+                    <TabsTrigger value="settings"> Settings </TabsTrigger>
+                </TabsList>
+                <TabsContent value="dashboard"> Overview on organisation. </TabsContent>
+                <TabsContent value="settings"> 
+                    <WhenVisible data="providers">
+                        <template #fallback>
+                            Loading...
+                        </template>
+                        <h3 class="text-2xl font-bold tracking-tight mt-4">Server Providers</h3>
+                        <p class="text-sm text-muted-foreground">Manage your server providers.</p>
+                        
+                    </WhenVisible>
+                </TabsContent>
+            </Tabs>
         </div>
     </AppLayout>
 </template>