From a7386814c7a8a799868f5c41f7e09d1f97621946 Mon Sep 17 00:00:00 2001
From: "Harry (hjbdev)" <harry@hjb.dev>
Date: Tue, 8 Apr 2025 17:54:33 +0100
Subject: [PATCH] counts on the dashboard

---
 .../Controllers/OrganisationController.php    |  2 +
 resources/js/pages/organisations/Show.vue     | 72 +++++++++++++++----
 resources/js/types/index.d.ts                 |  2 +-
 routes/web.php                                |  3 +-
 4 files changed, 65 insertions(+), 14 deletions(-)

diff --git a/app/Http/Controllers/OrganisationController.php b/app/Http/Controllers/OrganisationController.php
index cd08ecb..bca7630 100644
--- a/app/Http/Controllers/OrganisationController.php
+++ b/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')),
         ]);
     }
 }
diff --git a/resources/js/pages/organisations/Show.vue b/resources/js/pages/organisations/Show.vue
index a1a0375..1858c89 100644
--- a/resources/js/pages/organisations/Show.vue
+++ b/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="settings"> 
+                <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>
-                            Loading...
-                        </template>
-                        <h3 class="text-2xl font-bold tracking-tight mt-4">Server Providers</h3>
-                        <p class="text-sm text-muted-foreground mb-4">Manage your server providers.</p>
-                        <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">
+                        <template #fallback> Loading... </template>
+                        <h3 class="mt-4 text-2xl font-bold tracking-tight">Server Providers</h3>
+                        <p class="mb-4 text-sm text-muted-foreground">Manage your server providers.</p>
+                        <div class="border-muted-background divide-y-muted-background divide-y rounded-md border">
+                            <div v-for="provider in providers" class="flex items-center gap-2 px-2 py-1">
                                 {{ 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>
diff --git a/resources/js/types/index.d.ts b/resources/js/types/index.d.ts
index 853da1d..d9a81ad 100644
--- a/resources/js/types/index.d.ts
+++ b/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 {
diff --git a/routes/web.php b/routes/web.php
index 5985b72..04eccda 100644
--- a/routes/web.php
+++ b/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 () {