Implement Keystone environment deployments

resources/js/pages/applications/Index.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { Badge } from '@/components/ui/badge';
-import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 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';
 
@@ -26,18 +25,26 @@ const props = defineProps({
             },
         ]"
     >
-        <div class="flex justify-between items-center gap-3 p-4">
+        <div class="flex items-center justify-between gap-3 p-4">
             <h2 class="text-3xl font-bold tracking-tight">Applications</h2>
             <div>
-                <!-- <Button :as="Link" :href="route('applications.create', {
-                    organisation: $page.props.organisation.id,
-                })">Create</Button> -->
+                <Button
+                    :as="Link"
+                    :href="
+                        route('applications.create', {
+                            organisation: $page.props.organisation.id,
+                        })
+                    "
+                >
+                    Create
+                </Button>
             </div>
         </div>
         <div class="grid gap-4 rounded-xl p-4 md:grid-cols-2 lg:grid-cols-3">
             <Card v-for="application in applications" :key="`application{$applications.id}`" class="relative w-full">
                 <CardHeader>
                     <CardTitle>{{ application.name }}</CardTitle>
+                    <CardDescription>{{ application.environments?.length ?? 0 }} environments</CardDescription>
                 </CardHeader>
                 <Link
                     :href="