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/pages/gateway-routes/Create.vue

@@ -3,6 +3,13 @@ import InputError from "@/components/InputError.vue";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
 import AppLayout from "@/layouts/AppLayout.vue";
 import { Head, useForm } from "@inertiajs/vue3";
 
@@ -13,7 +20,7 @@ const props = defineProps<{
 }>();
 
 const form = useForm({
-    service_id: props.services[0]?.id ?? null,
+    service_id: String(props.services[0]?.id ?? ""),
     name: "",
     domain: "",
     path_prefix: "/",
@@ -77,16 +84,20 @@ const form = useForm({
 
             <div class="grid gap-2">
                 <Label for="service_id">Gateway service</Label>
-                <select
-                    id="service_id"
-                    v-model="form.service_id"
-                    class="h-9 rounded-md border border-input bg-transparent px-3 text-sm"
-                    required
-                >
-                    <option v-for="service in services" :key="service.id" :value="service.id">
-                        {{ service.name }}
-                    </option>
-                </select>
+                <Select v-model="form.service_id" required>
+                    <SelectTrigger id="service_id">
+                        <SelectValue placeholder="Select gateway service" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem
+                            v-for="service in services"
+                            :key="service.id"
+                            :value="String(service.id)"
+                        >
+                            {{ service.name }}
+                        </SelectItem>
+                    </SelectContent>
+                </Select>
                 <InputError :message="form.errors.service_id" />
             </div>
 
@@ -99,7 +110,12 @@ const form = useForm({
             <div class="grid gap-4 md:grid-cols-2">
                 <div class="grid gap-2">
                     <Label for="domain">Domain</Label>
-                    <Input id="domain" v-model="form.domain" placeholder="app.example.com" required />
+                    <Input
+                        id="domain"
+                        v-model="form.domain"
+                        placeholder="app.example.com"
+                        required
+                    />
                     <InputError :message="form.errors.domain" />
                 </div>
                 <div class="grid gap-2">

resources/js/pages/gateway-routes/Edit.vue

@@ -94,7 +94,12 @@ const destroyRoute = (): void => {
             <div class="grid gap-4 md:grid-cols-2">
                 <div class="grid gap-2">
                     <Label for="domain">Domain</Label>
-                    <Input id="domain" v-model="form.domain" placeholder="app.example.com" required />
+                    <Input
+                        id="domain"
+                        v-model="form.domain"
+                        placeholder="app.example.com"
+                        required
+                    />
                     <InputError :message="form.errors.domain" />
                 </div>
                 <div class="grid gap-2">
@@ -111,7 +116,11 @@ const destroyRoute = (): void => {
 
             <div class="grid gap-2">
                 <Label for="certificate_status">Certificate status</Label>
-                <Input id="certificate_status" v-model="form.certificate_status" placeholder="pending" />
+                <Input
+                    id="certificate_status"
+                    v-model="form.certificate_status"
+                    placeholder="pending"
+                />
                 <InputError :message="form.errors.certificate_status" />
             </div>
 

resources/js/pages/gateway-routes/Index.vue

@@ -13,7 +13,8 @@ const props = defineProps<{
 }>();
 
 const destroyRoute = (routeAttachment: Record<string, any>): void => {
-    const domain = routeAttachment.service_slice?.config?.domain ?? routeAttachment.service_slice?.name;
+    const domain =
+        routeAttachment.service_slice?.config?.domain ?? routeAttachment.service_slice?.name;
 
     if (!window.confirm(`Remove gateway route ${domain}?`)) {
         return;
@@ -87,7 +88,10 @@ const destroyRoute = (routeAttachment: Record<string, any>): void => {
                         <div class="flex flex-wrap items-start justify-between gap-3">
                             <div>
                                 <CardTitle>
-                                    {{ routeAttachment.service_slice?.config?.domain ?? "Unassigned domain" }}
+                                    {{
+                                        routeAttachment.service_slice?.config?.domain ??
+                                        "Unassigned domain"
+                                    }}
                                 </CardTitle>
                                 <CardDescription>
                                     {{ routeAttachment.service?.name }} ·