wowowowowo

2026-05-28 15:15:41 +01:00
parent 8f603122e2
commit 5b977c1f41
129 changed files with 9943 additions and 722 deletions
--- a/resources/js/pages/environments/Index.vue
+++ b/resources/js/pages/environments/Index.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import AppLayout from "@/layouts/AppLayout.vue";
+import { Head, Link } from "@inertiajs/vue3";
+import { BoxesIcon, PlusIcon } from "lucide-vue-next";
+
+defineProps<{
+    applications: Record<string, any>[];
+}>();
+</script>
+
+<template>
+    <Head title="Environments" />
+
+    <AppLayout
+        :breadcrumbs="[
+            {
+                title: 'Environments',
+                href: route('environments.index', { organisation: $page.props.organisation.id }),
+            },
+        ]"
+    >
+        <div class="flex h-full flex-1 flex-col gap-4 p-4">
+            <div class="flex flex-wrap items-center justify-between gap-3">
+                <div>
+                    <h2 class="text-3xl font-bold tracking-tight">Environments</h2>
+                    <p class="mt-1 text-sm text-muted-foreground">
+                        Deployment units across all applications.
+                    </p>
+                </div>
+                <Button
+                    :as="Link"
+                    :href="route('applications.create', { organisation: $page.props.organisation.id })"
+                >
+                    <PlusIcon class="size-4" />
+                    Application
+                </Button>
+            </div>
+
+            <div class="grid gap-4">
+                <Card v-for="application in applications" :key="application.id">
+                    <CardHeader>
+                        <CardTitle>{{ application.name }}</CardTitle>
+                        <CardDescription>
+                            {{ application.environments?.length ?? 0 }} environments
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+                        <Link
+                            v-for="environment in application.environments"
+                            :key="environment.id"
+                            :href="
+                                route('environments.show', {
+                                    organisation: $page.props.organisation.id,
+                                    application: application.id,
+                                    environment: environment.id,
+                                })
+                            "
+                            class="rounded-md border p-3 hover:bg-muted/50"
+                        >
+                            <div class="flex items-center gap-2">
+                                <BoxesIcon class="size-4" />
+                                <span class="font-medium">{{ environment.name }}</span>
+                                <Badge :variant="environment.status === 'active' ? 'success' : 'secondary'">
+                                    {{ environment.status.replace('-', ' ') }}
+                                </Badge>
+                            </div>
+                            <p class="mt-2 text-sm text-muted-foreground">
+                                {{ environment.branch }} · {{ environment.services_count }} services ·
+                                {{ environment.build_artifacts_count }} builds
+                            </p>
+                        </Link>
+                    </CardContent>
+                </Card>
+
+                <Card v-if="applications.every((application) => !application.environments?.length)">
+                    <CardHeader>
+                        <CardTitle>No environments yet</CardTitle>
+                        <CardDescription>
+                            Create an application to provision its first environment.
+                        </CardDescription>
+                    </CardHeader>
+                </Card>
+            </div>
+        </div>
+    </AppLayout>
+</template>