Restructure UX and seed a fully simulated organisation

Rework the dashboard, environment topology view, header navigation, and
status rendering, and standardise selects on a shadcn-vue component.

Replace the thin database seeder with a SimulatedEnvironmentSeeder that
builds a fully wired, mostly-running organisation (ACTIVE server fleet,
managed + GHCR registries, Gitea source provider, ClipBin app with
production/staging environments, services, slices, endpoints, managed
variables, build artifacts, and a completed/in-progress/failed operations
history) so the new UI renders against realistic data.

resources/js/components/AppHeader.vue

@@ -7,6 +7,9 @@ import { Button } from "@/components/ui/button";
 import {
     DropdownMenu,
     DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
     DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import {
@@ -24,9 +27,9 @@ import type { BreadcrumbItem, NavItem } from "@/types";
 import { Link, usePage } from "@inertiajs/vue3";
 import {
     AppWindowIcon,
-    BoltIcon,
     BoxesIcon,
-    ClipboardListIcon,
+    Check,
+    ChevronsUpDown,
     Menu,
     Search,
     ServerIcon,
@@ -45,7 +48,9 @@ const props = withDefaults(defineProps<Props>(), {
 const page = usePage();
 const auth = computed(() => page.props.auth);
 
-const isCurrentRoute = computed(() => (url: string) => page.url === url || page.url.startsWith(`${url}/`));
+const isCurrentRoute = computed(
+    () => (url: string) => page.url === url || page.url.startsWith(`${url}/`),
+);
 
 const activeItemStyles = computed(
     () => (url: string) =>
@@ -62,17 +67,21 @@ const mainNavItems: NavItem[] = [
     // },
 ];
 
+const activeOrganisation = computed(() => page.props.organisation);
+
+const organisations = computed(() => auth.value.user?.organisations ?? []);
+
 if (page.props.organisation) {
     const organisationId = page.props?.organisation?.id;
 
     mainNavItems.push({
-        title: page.props.organisation.name,
+        title: "Applications",
         href: new URL(
-            route("organisations.show", {
+            route("applications.index", {
                 organisation: organisationId,
             }),
         ).pathname,
-        icon: BoltIcon,
+        icon: AppWindowIcon,
     });
     mainNavItems.push({
         title: "Environments",
@@ -83,15 +92,6 @@ if (page.props.organisation) {
         ).pathname,
         icon: BoxesIcon,
     });
-    mainNavItems.push({
-        title: "Applications",
-        href: new URL(
-            route("applications.index", {
-                organisation: organisationId,
-            }),
-        ).pathname,
-        icon: AppWindowIcon,
-    });
     mainNavItems.push({
         title: "Servers",
         href: new URL(
@@ -110,24 +110,6 @@ if (page.props.organisation) {
         ).pathname,
         icon: WorkflowIcon,
     });
-
-    if (
-        page.props.organisation.providers_count === 0 ||
-        page.props.organisation.source_providers_count === 0 ||
-        page.props.organisation.registries_count === 0 ||
-        page.props.organisation.servers_count === 0 ||
-        page.props.organisation.applications_count === 0
-    ) {
-        mainNavItems.push({
-            title: "Onboarding",
-            href: new URL(
-                route("onboarding.show", {
-                    organisation: organisationId,
-                }),
-            ).pathname,
-            icon: ClipboardListIcon,
-        });
-    }
 }
 
 const rightNavItems: NavItem[] = [
@@ -206,6 +188,36 @@ const rightNavItems: NavItem[] = [
                     <AppLogo />
                 </Link>
 
+                <!-- Organisation switcher -->
+                <DropdownMenu v-if="activeOrganisation">
+                    <DropdownMenuTrigger :as-child="true">
+                        <Button
+                            variant="ghost"
+                            class="ml-2 h-9 max-w-[12rem] gap-1.5 px-2 text-sm font-medium"
+                        >
+                            <span class="truncate">{{ activeOrganisation.name }}</span>
+                            <ChevronsUpDown class="size-4 shrink-0 opacity-50" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="start" class="w-60">
+                        <DropdownMenuLabel>Organisations</DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                            v-for="organisation in organisations"
+                            :key="organisation.id"
+                            :as="Link"
+                            :href="route('organisations.show', { organisation: organisation.id })"
+                            class="cursor-pointer justify-between"
+                        >
+                            <span class="truncate">{{ organisation.name }}</span>
+                            <Check
+                                v-if="organisation.id === activeOrganisation.id"
+                                class="size-4 shrink-0"
+                            />
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+
                 <!-- Desktop Menu -->
                 <div class="hidden h-full lg:flex lg:flex-1">
                     <NavigationMenu class="ml-10 flex h-full items-stretch">

resources/js/components/StatusIndicator.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = withDefaults(
+    defineProps<{
+        status?: string | null;
+        label?: string;
+        size?: "sm" | "md";
+    }>(),
+    {
+        status: "unknown",
+        size: "sm",
+    },
+);
+
+type Tone = "positive" | "negative" | "pending" | "neutral";
+
+const tones: Record<string, Tone> = {
+    active: "positive",
+    running: "positive",
+    succeeded: "positive",
+    success: "positive",
+    completed: "positive",
+    ready: "positive",
+    verified: "positive",
+    enabled: "positive",
+    healthy: "positive",
+    stopped: "negative",
+    failed: "negative",
+    error: "negative",
+    errored: "negative",
+    unhealthy: "negative",
+    cancelled: "negative",
+    installing: "pending",
+    pending: "pending",
+    "in-progress": "pending",
+    building: "pending",
+    planning: "pending",
+    deploying: "pending",
+    provisioning: "pending",
+    queued: "pending",
+};
+
+const normalised = computed(() => (props.status ?? "unknown").toString().toLowerCase().trim());
+
+const tone = computed<Tone>(() => tones[normalised.value] ?? "neutral");
+
+const label = computed(
+    () =>
+        props.label ??
+        (props.status ?? "unknown").toString().replaceAll("-", " ").replaceAll("_", " "),
+);
+
+const dotClasses = computed(() => {
+    switch (tone.value) {
+        case "positive":
+            return "bg-green-500";
+        case "negative":
+            return "bg-red-500";
+        case "pending":
+            return "bg-amber-500 animate-pulse";
+        default:
+            return "bg-zinc-400 dark:bg-zinc-500";
+    }
+});
+
+const textClasses = computed(() => {
+    switch (tone.value) {
+        case "positive":
+            return "text-green-700 dark:text-green-400";
+        case "negative":
+            return "text-red-700 dark:text-red-400";
+        case "pending":
+            return "text-amber-700 dark:text-amber-400";
+        default:
+            return "text-muted-foreground";
+    }
+});
+</script>
+
+<template>
+    <span class="inline-flex items-center gap-1.5">
+        <span
+            class="inline-block rounded-full"
+            :class="[dotClasses, size === 'md' ? 'size-2' : 'size-1.5']"
+        />
+        <span class="capitalize" :class="[textClasses, size === 'md' ? 'text-sm' : 'text-xs']">{{
+            label
+        }}</span>
+    </span>
+</template>

resources/js/components/environments/ServiceCard.vue

@@ -5,17 +5,20 @@ import ServiceStatus from "@/enums/ServiceStatus";
 import ServiceType from "@/enums/ServiceType";
 import { DoorOpenIcon } from "lucide-vue-next";
 
-withDefaults(defineProps<{
-    icon?: object | Function;
-    serviceType?: string;
-    serviceCategory?: string;
-    status?: string;
-}>(), {
-    icon: () => DoorOpenIcon,
-    serviceType: ServiceType.GATEWAY,
-    serviceCategory: ServiceCategory.DATABASE,
-    status: ServiceStatus.UNKNOWN,
-});
+withDefaults(
+    defineProps<{
+        icon?: object | Function;
+        serviceType?: string;
+        serviceCategory?: string;
+        status?: string;
+    }>(),
+    {
+        icon: () => DoorOpenIcon,
+        serviceType: ServiceType.GATEWAY,
+        serviceCategory: ServiceCategory.DATABASE,
+        status: ServiceStatus.UNKNOWN,
+    },
+);
 </script>
 <template>
     <Card

resources/js/components/environments/SpecRow.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps<{
+    icon?: object | Function;
+    label: string;
+    value?: string | number | null;
+}>();
+</script>
+
+<template>
+    <div class="flex items-center justify-between gap-3 text-sm">
+        <span class="flex items-center gap-2 text-muted-foreground">
+            <component :is="icon" v-if="icon" class="size-4 opacity-70" />
+            {{ label }}
+        </span>
+        <span class="truncate text-right font-medium">
+            <slot>{{ value ?? "—" }}</slot>
+        </span>
+    </div>
+</template>

resources/js/components/environments/TopologyCard.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import StatusIndicator from "@/components/StatusIndicator.vue";
+import { Card } from "@/components/ui/card";
+
+defineProps<{
+    title: string;
+    subtitle?: string | null;
+    icon?: object | Function;
+    status?: string | null;
+}>();
+</script>
+
+<template>
+    <Card class="overflow-hidden">
+        <div class="flex items-center justify-between gap-3 border-b bg-muted/30 px-4 py-3">
+            <div class="flex min-w-0 items-center gap-2">
+                <component :is="icon" v-if="icon" class="size-4 shrink-0 opacity-70" />
+                <span class="truncate font-semibold">{{ title }}</span>
+                <span v-if="subtitle" class="truncate text-xs text-muted-foreground">{{
+                    subtitle
+                }}</span>
+            </div>
+            <StatusIndicator v-if="status" :status="status" />
+        </div>
+        <div class="grid gap-2.5 p-4">
+            <slot />
+        </div>
+    </Card>
+</template>

resources/js/components/operations/OperationTimeline.vue

@@ -13,7 +13,8 @@ defineProps<{
 
 const selectedStep = ref<Record<string, any> | null>(null);
 
-const label = (value?: string | null): string => value?.replaceAll("_", " ").replaceAll("-", " ") ?? "";
+const label = (value?: string | null): string =>
+    value?.replaceAll("_", " ").replaceAll("-", " ") ?? "";
 
 const targetLabel = (target?: Record<string, any> | null): string => {
     if (!target) {
@@ -74,9 +75,7 @@ const targetLabel = (target?: Record<string, any> | null): string => {
                     <div class="min-w-0">
                         <div class="flex flex-wrap items-center gap-2">
                             <div class="font-medium">{{ step.name ?? "Unnamed step" }}</div>
-                            <Badge
-                                :variant="step.status === 'completed' ? 'success' : 'secondary'"
-                            >
+                            <Badge :variant="step.status === 'completed' ? 'success' : 'secondary'">
                                 {{ label(step.status) }}
                             </Badge>
                         </div>
@@ -115,9 +114,7 @@ const targetLabel = (target?: Record<string, any> | null): string => {
                         >
                             {{ label(child.kind) }}
                         </Link>
-                        <Badge
-                            :variant="child.status === 'completed' ? 'success' : 'secondary'"
-                        >
+                        <Badge :variant="child.status === 'completed' ? 'success' : 'secondary'">
                             {{ label(child.status) }}
                         </Badge>
                         <span class="text-muted-foreground">{{ targetLabel(child.target) }}</span>
@@ -126,23 +123,35 @@ const targetLabel = (target?: Record<string, any> | null): string => {
             </div>
         </div>
 
-        <div v-if="operations.length === 0" class="rounded-md border border-dashed p-6 text-sm text-muted-foreground">
+        <div
+            v-if="operations.length === 0"
+            class="rounded-md border border-dashed p-6 text-sm text-muted-foreground"
+        >
             No operations recorded yet.
         </div>
     </div>
 
-    <Dialog :open="!!selectedStep" @update:open="($event) => (!$event ? (selectedStep = null) : null)">
+    <Dialog
+        :open="!!selectedStep"
+        @update:open="($event) => (!$event ? (selectedStep = null) : null)"
+    >
         <DialogContent class="md:max-w-3xl">
             <DialogHeader>
                 <DialogTitle>Logs for {{ selectedStep?.name ?? "step" }}</DialogTitle>
             </DialogHeader>
             <section v-if="selectedStep?.logs">
                 <h3 class="text-sm font-medium">Logs</h3>
-                <pre class="max-h-80 overflow-auto whitespace-pre-wrap text-xs text-muted-foreground">{{ selectedStep.logs }}</pre>
+                <pre
+                    class="max-h-80 overflow-auto whitespace-pre-wrap text-xs text-muted-foreground"
+                    >{{ selectedStep.logs }}</pre
+                >
             </section>
             <section v-if="selectedStep?.error_logs">
                 <h3 class="text-sm font-medium">Error Logs</h3>
-                <pre class="max-h-80 overflow-auto whitespace-pre-wrap text-xs text-muted-foreground">{{ selectedStep.error_logs }}</pre>
+                <pre
+                    class="max-h-80 overflow-auto whitespace-pre-wrap text-xs text-muted-foreground"
+                    >{{ selectedStep.error_logs }}</pre
+                >
             </section>
         </DialogContent>
     </Dialog>

resources/js/components/ui/select/Select.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+    SelectRoot,
+    useForwardPropsEmits,
+    type SelectRootEmits,
+    type SelectRootProps,
+} from "radix-vue";
+
+const props = defineProps<SelectRootProps>();
+const emits = defineEmits<SelectRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <SelectRoot v-bind="forwarded">
+        <slot />
+    </SelectRoot>
+</template>

resources/js/components/ui/select/SelectContent.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import SelectScrollDownButton from "./SelectScrollDownButton.vue";
+import SelectScrollUpButton from "./SelectScrollUpButton.vue";
+import {
+    SelectContent,
+    type SelectContentEmits,
+    type SelectContentProps,
+    SelectPortal,
+    SelectViewport,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+const props = withDefaults(
+    defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        position: "popper",
+    },
+);
+const emits = defineEmits<SelectContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <SelectPortal>
+        <SelectContent
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                    position === 'popper' &&
+                        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+                    props.class,
+                )
+            "
+        >
+            <SelectScrollUpButton />
+            <SelectViewport
+                :class="
+                    cn(
+                        'p-1',
+                        position === 'popper' &&
+                            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+                    )
+                "
+            >
+                <slot />
+            </SelectViewport>
+            <SelectScrollDownButton />
+        </SelectContent>
+    </SelectPortal>
+</template>

resources/js/components/ui/select/SelectGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { SelectGroup, type SelectGroupProps, useForwardProps } from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectGroup v-bind="forwardedProps" :class="cn('p-1', props.class)">
+        <slot />
+    </SelectGroup>
+</template>

resources/js/components/ui/select/SelectItem.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { Check } from "lucide-vue-next";
+import {
+    SelectItem,
+    SelectItemIndicator,
+    type SelectItemProps,
+    SelectItemText,
+    useForwardProps,
+} from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectItem
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                props.class,
+            )
+        "
+    >
+        <span class="absolute right-2 flex size-3.5 items-center justify-center">
+            <SelectItemIndicator>
+                <Check class="size-4" />
+            </SelectItemIndicator>
+        </span>
+        <SelectItemText>
+            <slot />
+        </SelectItemText>
+    </SelectItem>
+</template>

resources/js/components/ui/select/SelectLabel.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { SelectLabel, type SelectLabelProps } from "radix-vue";
+import { type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+    <SelectLabel :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
+        <slot />
+    </SelectLabel>
+</template>

resources/js/components/ui/select/SelectScrollDownButton.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-vue-next";
+import {
+    SelectScrollDownButton,
+    type SelectScrollDownButtonProps,
+    useForwardProps,
+} from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectScrollDownButton
+        v-bind="forwardedProps"
+        :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+    >
+        <slot>
+            <ChevronDown class="size-4" />
+        </slot>
+    </SelectScrollDownButton>
+</template>

resources/js/components/ui/select/SelectScrollUpButton.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ChevronUp } from "lucide-vue-next";
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectScrollUpButton
+        v-bind="forwardedProps"
+        :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+    >
+        <slot>
+            <ChevronUp class="size-4" />
+        </slot>
+    </SelectScrollUpButton>
+</template>

resources/js/components/ui/select/SelectSeparator.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { SelectSeparator, type SelectSeparatorProps } from "radix-vue";
+import { type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+    <SelectSeparator :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>

resources/js/components/ui/select/SelectTrigger.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-vue-next";
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectTrigger
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 data-[placeholder]:text-muted-foreground',
+                props.class,
+            )
+        "
+    >
+        <slot />
+        <SelectIcon as-child>
+            <ChevronDown class="size-4 opacity-50" />
+        </SelectIcon>
+    </SelectTrigger>
+</template>

resources/js/components/ui/select/SelectValue.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from "radix-vue";
+
+const props = defineProps<SelectValueProps>();
+</script>
+
+<template>
+    <SelectValue v-bind="props">
+        <slot />
+    </SelectValue>
+</template>

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

@@ -0,0 +1,10 @@
+export { default as Select } from "./Select.vue";
+export { default as SelectContent } from "./SelectContent.vue";
+export { default as SelectGroup } from "./SelectGroup.vue";
+export { default as SelectItem } from "./SelectItem.vue";
+export { default as SelectLabel } from "./SelectLabel.vue";
+export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue";
+export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue";
+export { default as SelectSeparator } from "./SelectSeparator.vue";
+export { default as SelectTrigger } from "./SelectTrigger.vue";
+export { default as SelectValue } from "./SelectValue.vue";