added tabs component, org show wip

app/Http/Controllers/OrganisationController.php

@@ -2,10 +2,16 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Provider;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+
 class OrganisationController extends Controller
 {
-    public function show()
+    public function show(Request $request)
     {
-        return inertia('organisations/Show');
+        return inertia('organisations/Show', [
+            'providers' => Inertia::lazy(fn () => Provider::whereOrganisationId($request->route('organisation'))->get()),
+        ]);
     }
 }

package-lock.json

@@ -16,6 +16,7 @@
                 "lucide": "^0.468.0",
                 "lucide-vue-next": "^0.468.0",
                 "radix-vue": "^1.9.11",
+                "reka-ui": "^2.2.0",
                 "tailwind-merge": "^2.6.0",
                 "tailwindcss": "^3.4.1",
                 "tailwindcss-animate": "^1.0.7",
@@ -3658,6 +3659,12 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/ohash": {
+            "version": "2.0.11",
+            "resolved": "https://registry.npmjs.org/ohash/-/ohash-2.0.11.tgz",
+            "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
+            "license": "MIT"
+        },
         "node_modules/optionator": {
             "version": "0.9.4",
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -4276,6 +4283,27 @@
                 "node": ">=8.10.0"
             }
         },
+        "node_modules/reka-ui": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.2.0.tgz",
+            "integrity": "sha512-eeRrLI4LwJ6dkdwks6KFNKGs0+beqZlHO3JMHen7THDTh+yJ5Z0KNwONmOhhV/0hZC2uJCEExgG60QPzGstkQg==",
+            "license": "MIT",
+            "dependencies": {
+                "@floating-ui/dom": "^1.6.13",
+                "@floating-ui/vue": "^1.1.6",
+                "@internationalized/date": "^3.5.0",
+                "@internationalized/number": "^3.5.0",
+                "@tanstack/vue-virtual": "^3.12.0",
+                "@vueuse/core": "^12.5.0",
+                "@vueuse/shared": "^12.5.0",
+                "aria-hidden": "^1.2.4",
+                "defu": "^6.1.4",
+                "ohash": "^2.0.11"
+            },
+            "peerDependencies": {
+                "vue": ">= 3.2.0"
+            }
+        },
         "node_modules/require-directory": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",

package.json

@@ -34,6 +34,7 @@
         "lucide": "^0.468.0",
         "lucide-vue-next": "^0.468.0",
         "radix-vue": "^1.9.11",
+        "reka-ui": "^2.2.0",
         "tailwind-merge": "^2.6.0",
         "tailwindcss": "^3.4.1",
         "tailwindcss-animate": "^1.0.7",

resources/js/components/AppLogo.vue

@@ -7,6 +7,6 @@ import AppLogoIcon from '@/components/AppLogoIcon.vue';
         <AppLogoIcon class="size-5 fill-current text-white dark:text-black" />
     </div>
     <div class="ml-1 grid flex-1 text-left text-sm">
-        <span class="mb-0.5 truncate font-semibold leading-none">Laravel Starter Kit</span>
+        <span class="mb-0.5 truncate font-semibold leading-none">Keystone</span>
     </div>
 </template>

resources/js/components/ui/tabs/Tabs.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

resources/js/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsContent, type TabsContentProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

resources/js/components/ui/tabs/TabsList.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsList, type TabsListProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>

resources/js/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      props.class,
+    )"
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>

resources/js/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'

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>