wowowowowo

resources/js/pages/servers/Index.vue

@@ -1,16 +1,15 @@
-<script setup>
+<script setup lang="ts">
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import AppLayout from "@/layouts/AppLayout.vue";
 import { Head, Link } from "@inertiajs/vue3";
+import { PlusIcon } from "lucide-vue-next";
 
-const props = defineProps({
-    servers: {
-        type: [Object, null],
-        required: true,
-    },
-});
+defineProps<{
+    servers: Record<string, any>;
+    networks: Record<string, any>[];
+}>();
 </script>
 
 <template>
@@ -27,7 +26,12 @@ const props = defineProps({
         ]"
     >
         <div class="flex items-center justify-between gap-3 p-4">
-            <h2 class="text-3xl font-bold tracking-tight">Servers</h2>
+            <div>
+                <h2 class="text-3xl font-bold tracking-tight">Servers</h2>
+                <p class="mt-1 text-sm text-muted-foreground">
+                    Compute nodes, private networking, firewall status, and hosted services.
+                </p>
+            </div>
             <div>
                 <Button
                     :as="Link"
@@ -36,14 +40,16 @@ const props = defineProps({
                             organisation: $page.props.organisation.id,
                         })
                     "
-                    >Create</Button
                 >
+                    <PlusIcon class="size-4" />
+                    Create
+                </Button>
             </div>
         </div>
         <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}`"
+                :key="server.id"
                 class="relative w-full"
             >
                 <CardHeader>
@@ -65,6 +71,91 @@ const props = defineProps({
                     class="absolute inset-0"
                 ></Link>
             </Card>
+            <Card v-if="servers.data.length === 0" class="md:col-span-2 lg:col-span-3">
+                <CardHeader>
+                    <CardTitle>No servers yet</CardTitle>
+                    <CardDescription>
+                        Create the first server or continue onboarding to configure providers,
+                        source access, and registry details.
+                    </CardDescription>
+                    <div class="flex flex-wrap gap-2">
+                        <Button
+                            :as="Link"
+                            :href="
+                                route('servers.create', {
+                                    organisation: $page.props.organisation.id,
+                                })
+                            "
+                        >
+                            <PlusIcon class="size-4" />
+                            Create server
+                        </Button>
+                        <Button
+                            :as="Link"
+                            variant="secondary"
+                            :href="
+                                route('onboarding.show', {
+                                    organisation: $page.props.organisation.id,
+                                })
+                            "
+                        >
+                            Onboarding
+                        </Button>
+                    </div>
+                </CardHeader>
+            </Card>
         </div>
+        <section class="grid gap-4 p-4">
+            <div>
+                <h3 class="text-xl font-semibold tracking-tight">Private Networks</h3>
+                <p class="mt-1 text-sm text-muted-foreground">
+                    Provider network zones and the servers attached to each private range.
+                </p>
+            </div>
+            <div class="grid gap-4 md:grid-cols-2">
+                <Card v-for="network in networks" :key="network.id">
+                    <CardHeader>
+                        <CardTitle>{{ network.name }}</CardTitle>
+                        <CardDescription>
+                            {{ network.ip_range }} · {{ network.network_zone }} ·
+                            {{ network.servers.length }} servers
+                        </CardDescription>
+                    </CardHeader>
+                    <div class="grid gap-2 px-6 pb-6">
+                        <Link
+                            v-for="server in network.servers"
+                            :key="server.id"
+                            :href="
+                                route('servers.show', {
+                                    organisation: $page.props.organisation.id,
+                                    server: server.id,
+                                })
+                            "
+                            class="flex flex-wrap items-center justify-between gap-3 rounded-md border p-3 text-sm hover:bg-muted/50"
+                        >
+                            <span class="font-medium">{{ server.name }}</span>
+                            <span class="text-muted-foreground">
+                                {{ server.private_ip ?? "no private IP" }} ·
+                                {{ server.status.replace("-", " ") }}
+                            </span>
+                        </Link>
+                        <div
+                            v-if="network.servers.length === 0"
+                            class="rounded-md border border-dashed p-3 text-sm text-muted-foreground"
+                        >
+                            No servers attached.
+                        </div>
+                    </div>
+                </Card>
+                <Card v-if="networks.length === 0" class="border-dashed">
+                    <CardHeader>
+                        <CardTitle>No private networks</CardTitle>
+                        <CardDescription>
+                            Networks are created when the first server is provisioned for a provider zone.
+                        </CardDescription>
+                    </CardHeader>
+                </Card>
+            </div>
+        </section>
     </AppLayout>
 </template>