server list, logs removed, driver/plan wip

resources/js/components/AppSidebarHeader.vue

@@ -20,10 +20,18 @@ const environment = usePage().props.environment ?? null;
     <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-4">
+        <div class="flex w-full items-center gap-4">
             <SidebarTrigger class="-ml-1" />
-            <div class="gap-0.25 flex items-center">
-                <Button :as="organisation ? Link : 'button'" :href="organisation ? route('organisations.show', { organisation: organisation?.id }) : null" variant="ghost" size="xs">
+            <template v-if="breadcrumbs.length > 0">
+                <Breadcrumbs :breadcrumbs="breadcrumbs" />
+            </template>
+            <div class="gap-0.25 ml-auto flex items-center">
+                <Button
+                    :as="organisation ? Link : 'button'"
+                    :href="organisation ? route('organisations.show', { organisation: organisation?.id }) : null"
+                    variant="ghost"
+                    size="xs"
+                >
                     {{ organisation?.name ?? 'Select Organisation' }}
                 </Button>
                 <DropdownMenu>
@@ -42,15 +50,18 @@ const environment = usePage().props.environment ?? null;
             </div>
             <div v-if="organisation" class="gap-0.25 flex items-center">
                 <Button
+                    :disabled="!organisation?.applications?.length"
                     :as="application ? Link : 'button'"
-                    :href="application ? route('applications.show', { organisation: application.organisation_id, application: application.id }) : null"
+                    :href="
+                        application ? route('applications.show', { organisation: application.organisation_id, application: application.id }) : null
+                    "
                     variant="ghost"
                     size="xs"
                 >
-                    {{ application?.name ?? 'Select Application' }}
+                    {{ application?.name ?? 'Application' }}
                 </Button>
                 <DropdownMenu>
-                    <DropdownMenuTrigger :as="Button" size="iconxs" variant="ghost">
+                    <DropdownMenuTrigger :as="Button" size="iconxs" variant="ghost" :disabled="!organisation?.applications?.length">
                         <ChevronsUpDown class="size-3" />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
@@ -63,32 +74,44 @@ const environment = usePage().props.environment ?? null;
                     </DropdownMenuContent>
                 </DropdownMenu>
             </div>
-            <div v-if="application" class="gap-0.25 flex items-center">
+            <div class="gap-0.25 flex items-center">
                 <Button
+                    :disabled="!application?.environments?.length"
                     :as="environment ? Link : 'button'"
-                    :href="environment ? route('environments.show', { organisation: application.organisation_id, application: application.id, environment: environment.id  }) : null"
+                    :href="
+                        environment
+                            ? route('environments.show', {
+                                  organisation: application.organisation_id,
+                                  application: application.id,
+                                  environment: environment.id,
+                              })
+                            : null
+                    "
                     variant="ghost"
                     size="xs"
                 >
-                    {{ environment?.name ?? 'Select Environment' }}
+                    {{ environment?.name ?? 'Environment' }}
                 </Button>
                 <DropdownMenu>
-                    <DropdownMenuTrigger :as="Button" size="iconxs" variant="ghost">
+                    <DropdownMenuTrigger :as="Button" size="iconxs" variant="ghost" :disabled="!application?.environments?.length">
                         <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 })"
+                            :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>
         </div>
     </header>
 </template>

resources/js/pages/servers/Index.vue

@@ -1,6 +1,7 @@
-<script setup lang="ts">
+<script setup>
+import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { Head } from '@inertiajs/vue3';
+import { Head, Link } from '@inertiajs/vue3';
 
 const props = defineProps({
     servers: {
@@ -13,9 +14,28 @@ const props = defineProps({
 <template>
     <Head title="Dashboard" />
 
-    <AppLayout>
-        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
-            {{ servers.data }}
+    <AppLayout :breadcrumbs="[
+        {
+            title: 'Servers',
+            href: route('servers.index', {
+                organisation: $page.props.organisation.id,
+            }),
+        },
+    ]">
+        <div class="grid gap-4 rounded-xl p-4 md:grid-cols-2 lg:grid-cols-3">
+            <Card v-for="server in servers.data" :key="`server{$servers.id}`" class="w-full relative">
+                <CardHeader>
+                    <CardTitle>{{ server.name }}</CardTitle>
+                    <CardDescription
+                        ><span class="inline-block rounded-md bg-green-200 px-2 text-xs uppercase text-green-800">{{ server.status }}</span> &bull;
+                        {{ server.ipv4 || server.ipv6 }}</CardDescription
+                    >
+                </CardHeader>
+                <Link :href="route('servers.show', {
+                    organisation: $page.props.organisation.id,
+                    server: server.id,
+                })" class="absolute inset-0"></Link>
+            </Card>
 
             <div>@todo pagination</div>
         </div>

resources/js/pages/servers/Show.vue

@@ -1,8 +1,6 @@
 <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({
     server: {
@@ -15,13 +13,29 @@ const props = defineProps({
 <template>
     <Head :title="server.name" />
 
-    <AppLayout>
+    <AppLayout
+        :breadcrumbs="[
+            {
+                title: 'Servers',
+                href: route('servers.index', {
+                    organisation: $page.props.organisation.id,
+                }),
+            },
+            {
+                title: server.name,
+                href: route('servers.show', {
+                    organisation: $page.props.organisation.id,
+                    server: server.id,
+                }),
+            },
+        ]"
+    >
         <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
             {{ server }}
 
             <div v-if="$page.props.flash?.server_credentials" class="p-5">
                 <div class="mb-4 text-sm font-medium text-gray-900 dark:text-white">
-                    WILL NOT BE SHOWN AGAIN: 
+                    WILL NOT BE SHOWN AGAIN:
                     {{ $page.props.flash.server_credentials }}
                 </div>
             </div>