counts on the dashboard

app/Http/Controllers/OrganisationController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Organisation;
 use App\Models\Provider;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
@@ -12,6 +13,7 @@ class OrganisationController extends Controller
     {
         return inertia('organisations/Show', [
             'providers' => Inertia::lazy(fn () => Provider::whereOrganisationId($request->route('organisation'))->get()),
+            'organisation' => Organisation::withCount('servers', 'applications', 'members')->findOrFail($request->route('organisation')),
         ]);
     }
 }

resources/js/pages/organisations/Show.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { Card, CardContent } from '@/components/ui/card';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import AppLayout from '@/layouts/AppLayout.vue';
-import { Head, WhenVisible } from '@inertiajs/vue3';
+import { Head, Link, WhenVisible } from '@inertiajs/vue3';
+import { AppWindowIcon, ServerIcon, UserIcon } from 'lucide-vue-next';
 
 defineProps({
     organisation: {
@@ -21,23 +23,69 @@ defineProps({
     <AppLayout>
         <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
             <h2 class="text-3xl font-bold tracking-tight">{{ organisation.name }}</h2>
-            <Tabs default-value="dashboard" class="w-[400px]" :unmount-on-hide="false">
+            <Tabs default-value="dashboard" :unmount-on-hide="false">
                 <TabsList>
                     <TabsTrigger value="dashboard"> Dashboard </TabsTrigger>
                     <TabsTrigger value="settings"> Settings </TabsTrigger>
                 </TabsList>
-                <TabsContent value="dashboard"> Overview on organisation. </TabsContent>
+                <TabsContent value="dashboard">
+                    <h3 class="mt-4 text-2xl font-bold tracking-tight">Your Resources</h3>
+                    <p class="mb-4 text-sm text-muted-foreground">Your organisation, at a glance.</p>
+                    <div class="grid w-full gap-4 md:grid-cols-3">
+                        <Card class="relative">
+                            <Link
+                                :href="
+                                    route('applications.index', {
+                                        organisation: organisation.id,
+                                    })
+                                "
+                                class="absolute inset-0"
+                            />
+                            <CardContent class="flex items-center gap-4 p-4">
+                                <AppWindowIcon class="size-6 text-muted-foreground" />
+                                <div>
+                                    <h4 class="mb-1 text-3xl font-medium leading-none">{{ organisation.applications_count }}</h4>
+                                    <p class="text-sm text-muted-foreground">Application{{ organisation.applications_count === 1 ? '' : 's' }}</p>
+                                </div>
+                            </CardContent>
+                        </Card>
+                        <Card class="relative">
+                            <Link
+                                class="absolute inset-0"
+                                :href="
+                                    route('servers.index', {
+                                        organisation: organisation.id,
+                                    })
+                                "
+                            />
+                            <CardContent class="flex items-center gap-4 p-4">
+                                <ServerIcon class="size-6 text-muted-foreground" />
+                                <div>
+                                    <h4 class="mb-1 text-3xl font-medium leading-none">{{ organisation.servers_count }}</h4>
+                                    <p class="text-sm text-muted-foreground">Server{{ organisation.servers_count === 1 ? '' : 's' }}</p>
+                                </div>
+                            </CardContent>
+                        </Card>
+                        <Card class="relative">
+                            <CardContent class="flex items-center gap-4 p-4">
+                                <UserIcon class="size-6 text-muted-foreground" />
+                                <div>
+                                    <h4 class="mb-1 text-3xl font-medium leading-none">{{ organisation.members_count }}</h4>
+                                    <p class="text-sm text-muted-foreground">Member{{ organisation.members_count === 1 ? '' : 's' }}</p>
+                                </div>
+                            </CardContent>
+                        </Card>
+                    </div>
+                </TabsContent>
                 <TabsContent value="settings">
                     <WhenVisible data="providers">
-                        <template #fallback>
+                        <template #fallback> Loading... </template>
-                            Loading...
+                        <h3 class="mt-4 text-2xl font-bold tracking-tight">Server Providers</h3>
-                        </template>
+                        <p class="mb-4 text-sm text-muted-foreground">Manage your server providers.</p>
-                        <h3 class="text-2xl font-bold tracking-tight mt-4">Server Providers</h3>
+                        <div class="border-muted-background divide-y-muted-background divide-y rounded-md border">
-                        <p class="text-sm text-muted-foreground mb-4">Manage your server providers.</p>
+                            <div v-for="provider in providers" class="flex items-center gap-2 px-2 py-1">
-                        <div class="border border-muted-background divide-y divide-y-muted-background rounded-md">
-                            <div v-for="provider in providers" class="py-1 px-2 flex gap-2 items-center">
                                 {{ provider.name }}
-                                <span class="uppercase text-xs ml-auto text-muted-foreground">{{ provider.type }}</span>
+                                <span class="ml-auto text-xs uppercase text-muted-foreground">{{ provider.type }}</span>
                             </div>
                         </div>
                     </WhenVisible>

resources/js/types/index.d.ts

@@ -8,7 +8,7 @@ export interface Auth {
 
 export interface BreadcrumbItem {
     title: string;
-    href: string;
+    href?: string;
 }
 
 export interface NavItem {

routes/web.php

@@ -32,7 +32,8 @@ Route::middleware(['auth', 'verified'])->group(function () {
         });
 
         Route::resource('applications', ApplicationController::class)
-            ->only('show')
+            ->only('show', 'index')
+            ->name('index', 'applications.index')
             ->name('show', 'applications.show');
 
         Route::prefix('applications/{application}')->group(function () {