Show pages for app,env,org plus navigation, servers wip

resources/js/components/AppSidebar.vue

@@ -4,8 +4,8 @@ import NavMain from '@/components/NavMain.vue';
 import NavUser from '@/components/NavUser.vue';
 import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
 import { type NavItem } from '@/types';
-import { Link } from '@inertiajs/vue3';
-import { BookOpen, Folder, LayoutGrid } from 'lucide-vue-next';
+import { Link, usePage } from '@inertiajs/vue3';
+import { LayoutGrid, Server } from 'lucide-vue-next';
 import AppLogo from './AppLogo.vue';
 
 const mainNavItems: NavItem[] = [
@@ -16,18 +16,19 @@ const mainNavItems: NavItem[] = [
     },
 ];
 
-const footerNavItems: NavItem[] = [
-    {
-        title: 'Github Repo',
-        href: 'https://github.com/laravel/vue-starter-kit',
-        icon: Folder,
-    },
-    {
-        title: 'Documentation',
-        href: 'https://laravel.com/docs/starter-kits',
-        icon: BookOpen,
-    },
-];
+const organisation = usePage().props.organisation;
+
+if (organisation) {
+    mainNavItems.push({
+        title: 'Servers',
+        href: route('servers.index', {
+            organisation: organisation.id,
+        }),
+        icon: Server,
+    });
+}
+
+const footerNavItems: NavItem[] = [];
 </script>
 
 <template>

resources/js/components/AppSidebarHeader.vue

@@ -11,8 +11,9 @@ defineProps<{
     breadcrumbs?: BreadcrumbItemType[];
 }>();
 
-const organisation = usePage().props.organisation ?? { name: 'Select Organisation' };
-const application = usePage().props.application ?? { name: 'Select Application' };
+const organisation = usePage().props.organisation ?? null;
+const application = usePage().props.application ?? null;
+const environment = usePage().props.environment ?? null;
 </script>
 
 <template>
@@ -22,8 +23,8 @@ const application = usePage().props.application ?? { name: 'Select Application'
         <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 :as="organisation ? Link : 'button'" :href="organisation ? route('organisations.show', { organisation: organisation?.id }) : null" variant="ghost" size="xs">
+                    {{ organisation?.name ?? 'Select Organisation' }}
                 </Button>
                 <DropdownMenu>
                     <DropdownMenuTrigger :as="Button" size="iconxs" variant="ghost">
@@ -39,14 +40,14 @@ const application = usePage().props.application ?? { name: 'Select Application'
                     </DropdownMenuContent>
                 </DropdownMenu>
             </div>
-            <div class="gap-0.25 flex items-center">
+            <div v-if="organisation" class="gap-0.25 flex items-center">
                 <Button
-                    :as="Link"
-                    :href="route('applications.show', { organisation: application.organisation_id, application: application.id })"
+                    :as="application ? Link : 'button'"
+                    :href="application ? route('applications.show', { organisation: application.organisation_id, application: application.id }) : null"
                     variant="ghost"
                     size="xs"
                 >
-                    {{ application?.name }}
+                    {{ application?.name ?? 'Select Application' }}
                 </Button>
                 <DropdownMenu>
                     <DropdownMenuTrigger :as="Button" size="iconxs" variant="ghost">
@@ -62,9 +63,32 @@ const application = usePage().props.application ?? { name: 'Select Application'
                     </DropdownMenuContent>
                 </DropdownMenu>
             </div>
+            <div v-if="application" class="gap-0.25 flex items-center">
+                <Button
+                    :as="environment ? Link : 'button'"
+                    :href="environment ? route('environments.show', { organisation: application.organisation_id, application: application.id, environment: environment.id  }) : null"
+                    variant="ghost"
+                    size="xs"
+                >
+                    {{ environment?.name ?? 'Select Environment' }}
+                </Button>
+                <DropdownMenu>
+                    <DropdownMenuTrigger :as="Button" size="iconxs" variant="ghost">
+                        <ChevronsUpDown class="size-3" />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                        <DropdownMenuItem
+                            v-for="env in application?.environments"
+                            :as="Link"
+                            :href="route('environments.show', { organisation: application.organisation_id, application: application.id, environment: env.id })"
+                            >{{ env.name }}</DropdownMenuItem
+                        >
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </div>
             <template v-if="breadcrumbs.length > 0">
                 <Breadcrumbs :breadcrumbs="breadcrumbs" />
-            </template>
+        </template>
         </div>
     </header>
 </template>

resources/js/pages/environments/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({
+    environment: {
+        type: Object,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <Head :title="environment.name" />
+
+    <AppLayout>
+        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
+            {{ environment }}
+        </div>
+    </AppLayout>
+</template>

resources/js/pages/organisations/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({
+    organisation: {
+        type: Object,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <Head :title="organisation.name" />
+
+    <AppLayout>
+        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
+            {{ organisation }}
+        </div>
+    </AppLayout>
+</template>

resources/js/pages/servers/Create.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import AppLayout from '@/layouts/AppLayout.vue';
+import { Head } from '@inertiajs/vue3';
+</script>
+
+<template>
+    <Head title="Create Server" />
+
+    <AppLayout>
+        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
+           
+        </div>
+    </AppLayout>
+</template>

resources/js/pages/servers/Index.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import AppLayout from '@/layouts/AppLayout.vue';
+import { Head } from '@inertiajs/vue3';
+
+const props = defineProps({
+    servers: {
+        type: [Array, null],
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <Head title="Dashboard" />
+
+    <AppLayout>
+        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
+            {{ servers.data }}
+
+            <div>@todo pagination</div>
+        </div>
+    </AppLayout>
+</template>