wowowowowo

resources/js/pages/applications/Index.vue

@@ -1,15 +1,13 @@
-<script setup>
+<script setup lang="ts">
 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({
-    applications: {
-        type: [Object, null],
-        required: true,
-    },
-});
+defineProps<{
+    applications: Record<string, any>[];
+}>();
 </script>
 
 <template>
@@ -26,7 +24,12 @@ const props = defineProps({
         ]"
     >
         <div class="flex items-center justify-between gap-3 p-4">
-            <h2 class="text-3xl font-bold tracking-tight">Applications</h2>
+            <div>
+                <h2 class="text-3xl font-bold tracking-tight">Applications</h2>
+                <p class="mt-1 text-sm text-muted-foreground">
+                    Source repositories and their deployment environments.
+                </p>
+            </div>
             <div>
                 <Button
                     :as="Link"
@@ -36,6 +39,7 @@ const props = defineProps({
                         })
                     "
                 >
+                    <PlusIcon class="size-4" />
                     Create
                 </Button>
             </div>
@@ -43,7 +47,7 @@ const props = defineProps({
         <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}`"
+                :key="application.id"
                 class="relative w-full"
             >
                 <CardHeader>
@@ -62,6 +66,28 @@ const props = defineProps({
                     class="absolute inset-0"
                 ></Link>
             </Card>
+            <Card v-if="applications.length === 0" class="md:col-span-2 lg:col-span-3">
+                <CardHeader>
+                    <CardTitle>No applications yet</CardTitle>
+                    <CardDescription>
+                        Create an application to add the first environment, deploy key, and runtime
+                        services.
+                    </CardDescription>
+                    <div>
+                        <Button
+                            :as="Link"
+                            :href="
+                                route('applications.create', {
+                                    organisation: $page.props.organisation.id,
+                                })
+                            "
+                        >
+                            <PlusIcon class="size-4" />
+                            Create application
+                        </Button>
+                    </div>
+                </CardHeader>
+            </Card>
         </div>
     </AppLayout>
 </template>