Basic seeder, navigating to application page

resources/js/components/AppSidebarHeader.vue

@@ -2,18 +2,66 @@
 import Breadcrumbs from '@/components/Breadcrumbs.vue';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import type { BreadcrumbItemType } from '@/types';
+import { Link, usePage } from '@inertiajs/vue3';
+import { ChevronsUpDown } from 'lucide-vue-next';
+import { Button } from './ui/button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './ui/dropdown-menu';
 
 defineProps<{
     breadcrumbs?: BreadcrumbItemType[];
 }>();
+
+const organisation = usePage().props.organisation ?? { name: 'Select Organisation' };
+const application = usePage().props.application ?? { name: 'Select Application' };
 </script>
 
 <template>
     <header
         class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/70 px-6 transition-[width,height] ease-in-out group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 md:px-4"
     >
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-4">
             <SidebarTrigger class="-ml-1" />
+            <div class="gap-0.25 flex items-center">
+                <Button :as="Link" :href="route('organisations.show', { organisation: organisation?.id })" variant="ghost" size="xs">
+                    {{ organisation?.name }}
+                </Button>
+                <DropdownMenu>
+                    <DropdownMenuTrigger :as="Button" size="iconxs" variant="ghost">
+                        <ChevronsUpDown class="size-3" />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                        <DropdownMenuItem
+                            v-for="org in $page.props.auth.user?.organisations"
+                            :as="Link"
+                            :href="route('organisations.show', { organisation: org.id })"
+                            >{{ org.name }}</DropdownMenuItem
+                        >
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
+            <div class="gap-0.25 flex items-center">
+                <Button
+                    :as="Link"
+                    :href="route('applications.show', { organisation: application.organisation_id, application: application.id })"
+                    variant="ghost"
+                    size="xs"
+                >
+                    {{ application?.name }}
+                </Button>
+                <DropdownMenu>
+                    <DropdownMenuTrigger :as="Button" size="iconxs" variant="ghost">
+                        <ChevronsUpDown class="size-3" />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                        <DropdownMenuItem
+                            v-for="app in organisation?.applications"
+                            :as="Link"
+                            :href="route('applications.show', { organisation: app.organisation_id, application: app.id })"
+                            >{{ app.name }}</DropdownMenuItem
+                        >
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
             <template v-if="breadcrumbs.length > 0">
                 <Breadcrumbs :breadcrumbs="breadcrumbs" />
             </template>

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

@@ -16,9 +16,11 @@ export const buttonVariants = cva(
             },
             size: {
                 default: 'h-9 px-4 py-2',
+                xs: 'h-7 px-2 text-xs',
                 sm: 'h-8 rounded-md px-3 text-xs',
                 lg: 'h-10 rounded-md px-8',
                 icon: 'h-9 w-9',
+                'iconxs': 'h-7 px-0.5',
             },
         },
         defaultVariants: {

resources/js/pages/Applications/Show.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import AppLayout from '@/layouts/AppLayout.vue';
+import { type BreadcrumbItem } from '@/types';
+import { Head } from '@inertiajs/vue3';
+import PlaceholderPattern from '../components/PlaceholderPattern.vue';
+
+const props = defineProps({
+    application: {
+        type: Object,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <Head title="Dashboard" />
+
+    <AppLayout>
+        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
+            {{ application }}
+        </div>
+    </AppLayout>
+</template>

resources/js/pages/Dashboard.vue

@@ -22,7 +22,7 @@ const breadcrumbs: BreadcrumbItem[] = [
             <div>Applications have environments</div>
             <div>Servers have services</div>
             <div>Services have slices, this could be a database table or a client in a websocket server</div>
-            <div>Environments have SLICES</div>
+            <div>Environments have  SLICES</div>
             <div>Also servers need to be provisioned</div>
             <div>Users have SSH keys</div>
             <div>Keystone has its own SSH keys</div>