From bc46fef19a34afff16485e39b7b5b2e05d87f21f Mon Sep 17 00:00:00 2001
From: Bohdan Shulha <b.shulha@pm.me>
Date: Thu, 8 Aug 2024 23:56:18 +0200
Subject: [PATCH] feat: #68 replace jetstream dashboard with saas-related
 microdashboard

---
 app/Http/Controllers/DashboardController.php  |  18 +++
 .../Middleware/EnsureTeamSubscription.php     |   2 +-
 app/Models/Team.php                           |   7 +-
 resources/js/Components/Welcome.vue           | 104 ------------------
 resources/js/Pages/Dashboard.vue              |  23 +++-
 resources/js/Pages/Nodes/Index.vue            |   2 +-
 routes/web.php                                |   6 +-
 7 files changed, 46 insertions(+), 116 deletions(-)
 create mode 100644 app/Http/Controllers/DashboardController.php
 delete mode 100644 resources/js/Components/Welcome.vue

diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
new file mode 100644
index 0000000..694624b
--- /dev/null
+++ b/app/Http/Controllers/DashboardController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Inertia\Inertia;
+
+class DashboardController extends Controller
+{
+    public function show()
+    {
+        $team = auth()->user()->currentTeam;
+
+        return Inertia::render('Dashboard', [
+            'nodesCount' => $team->nodes()->count(),
+            'servicesCount' => $team->services()->count(),
+        ]);
+    }
+}
diff --git a/app/Http/Middleware/EnsureTeamSubscription.php b/app/Http/Middleware/EnsureTeamSubscription.php
index d28f7c1..3bd3f22 100644
--- a/app/Http/Middleware/EnsureTeamSubscription.php
+++ b/app/Http/Middleware/EnsureTeamSubscription.php
@@ -18,7 +18,7 @@ public function handle(Request $request, Closure $next): Response
         $team = auth()->user()->currentTeam;
         $subscription = $team->subscription();
 
-        $doesntHaveSubscription = $subscription === null || ! $subscription->onTrial() && ! $subscription->active();
+        $doesntHaveSubscription = $subscription === null || ! $subscription->valid();
         if ($doesntHaveSubscription) {
             return redirect()->route('teams.billing.show', $team);
         }
diff --git a/app/Models/Team.php b/app/Models/Team.php
index e30e477..a2a3ee7 100644
--- a/app/Models/Team.php
+++ b/app/Models/Team.php
@@ -71,11 +71,16 @@ protected static function booted()
         });
     }
 
-    protected function nodes(): HasMany
+    public function nodes(): HasMany
     {
         return $this->hasMany(Node::class);
     }
 
+    public function services(): HasMany
+    {
+        return $this->hasMany(Service::class);
+    }
+
     /**
      * Get the name of the team.
      */
diff --git a/resources/js/Components/Welcome.vue b/resources/js/Components/Welcome.vue
deleted file mode 100644
index 1ebcfc9..0000000
--- a/resources/js/Components/Welcome.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup>
-import ApplicationLogo from '@/Components/ApplicationLogo.vue';
-</script>
-
-<template>
-    <div>
-        <div class="p-6 lg:p-8 bg-white dark:bg-gray-800 dark:bg-gradient-to-bl dark:from-gray-700/50 dark:via-transparent border-b border-gray-200 dark:border-gray-700">
-            <ApplicationLogo class="block h-12 w-auto" />
-
-            <h1 class="mt-8 text-2xl font-medium text-gray-900 dark:text-white">
-                Welcome to your Jetstream application!
-            </h1>
-
-            <p class="mt-6 text-gray-500 dark:text-gray-400 leading-relaxed">
-                Laravel Jetstream provides a beautiful, robust starting point for your next Laravel application. Laravel is designed
-                to help you build your application using a development environment that is simple, powerful, and enjoyable. We believe
-                you should love expressing your creativity through programming, so we have spent time carefully crafting the Laravel
-                ecosystem to be a breath of fresh air. We hope you love it.
-            </p>
-        </div>
-
-        <div class="bg-gray-200 dark:bg-gray-800 bg-opacity-25 grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8 p-6 lg:p-8">
-            <div>
-                <div class="flex items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
-                    </svg>
-                    <h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
-                        <a href="https://laravel.com/docs">Documentation</a>
-                    </h2>
-                </div>
-
-                <p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                    Laravel has wonderful documentation covering every aspect of the framework. Whether you're new to the framework or have previous experience, we recommend reading all of the documentation from beginning to end.
-                </p>
-
-                <p class="mt-4 text-sm">
-                    <a href="https://laravel.com/docs" class="inline-flex items-center font-semibold text-indigo-700 dark:text-indigo-300">
-                        Explore the documentation
-
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ms-1 w-5 h-5 fill-indigo-500 dark:fill-indigo-200">
-                            <path fill-rule="evenodd" d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z" clip-rule="evenodd" />
-                        </svg>
-                    </a>
-                </p>
-            </div>
-
-            <div>
-                <div class="flex items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
-                        <path stroke-linecap="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
-                    </svg>
-                    <h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
-                        <a href="https://laracasts.com">Laracasts</a>
-                    </h2>
-                </div>
-
-                <p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                    Laracasts offers thousands of video tutorials on Laravel, PHP, and JavaScript development. Check them out, see for yourself, and massively level up your development skills in the process.
-                </p>
-
-                <p class="mt-4 text-sm">
-                    <a href="https://laracasts.com" class="inline-flex items-center font-semibold text-indigo-700 dark:text-indigo-300">
-                        Start watching Laracasts
-
-                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="ms-1 w-5 h-5 fill-indigo-500 dark:fill-indigo-200">
-                            <path fill-rule="evenodd" d="M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z" clip-rule="evenodd" />
-                        </svg>
-                    </a>
-                </p>
-            </div>
-
-            <div>
-                <div class="flex items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
-                    </svg>
-                    <h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
-                        <a href="https://tailwindcss.com/">Tailwind</a>
-                    </h2>
-                </div>
-
-                <p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                    Laravel Jetstream is built with Tailwind, an amazing utility first CSS framework that doesn't get in your way. You'll be amazed how easily you can build and maintain fresh, modern designs with this wonderful framework at your fingertips.
-                </p>
-            </div>
-
-            <div>
-                <div class="flex items-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" class="w-6 h-6 stroke-gray-400">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
-                    </svg>
-                    <h2 class="ms-3 text-xl font-semibold text-gray-900 dark:text-white">
-                        Authentication
-                    </h2>
-                </div>
-
-                <p class="mt-4 text-gray-500 dark:text-gray-400 text-sm leading-relaxed">
-                    Authentication and registration views are included with Laravel Jetstream, as well as support for user email verification and resetting forgotten passwords. So, you're free to get started with what matters most: building your application.
-                </p>
-            </div>
-        </div>
-    </div>
-</template>
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index d2c067f..002e559 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -1,20 +1,33 @@
 <script setup>
-import AppLayout from '@/Layouts/AppLayout.vue';
-import Welcome from '@/Components/Welcome.vue';
+import AppLayout from "@/Layouts/AppLayout.vue";
+import ValueCard from "@/Components/ValueCard.vue";
+
+const props = defineProps(["nodesCount", "servicesCount"]);
 </script>
 
 <template>
     <AppLayout title="Dashboard">
         <template #header>
-            <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
+            <h2
+                class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight"
+            >
                 Dashboard
             </h2>
         </template>
 
         <div class="py-12">
             <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">
-                    <Welcome />
+                <div class="grid grid-cols-6 gap-4">
+                    <ValueCard
+                        class="bg-white py-2 px-4 rounded shadow text-right"
+                        label="Nodes"
+                        :value="nodesCount"
+                    />
+                    <ValueCard
+                        class="bg-white py-2 px-4 rounded shadow text-right"
+                        label="Services"
+                        :value="servicesCount"
+                    />
                 </div>
             </div>
         </div>
diff --git a/resources/js/Pages/Nodes/Index.vue b/resources/js/Pages/Nodes/Index.vue
index 50f2678..5dc75b6 100644
--- a/resources/js/Pages/Nodes/Index.vue
+++ b/resources/js/Pages/Nodes/Index.vue
@@ -57,7 +57,7 @@ defineProps({
                     v-for="node in nodes"
                     :key="node.id"
                     :href="route('nodes.show', { node: node.id })"
-                    class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg p-4 flex justify-around"
+                    class="bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg p-4 flex justify-around"
                 >
                     <div class="flex">
                         <div class="font-bold text-xl">{{ node.name }}</div>
diff --git a/routes/web.php b/routes/web.php
index ff8c89b..6669600 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\DashboardController;
 use App\Http\Controllers\NodeController;
 use App\Http\Controllers\NodeTaskGroupController;
 use App\Http\Controllers\RefundPolicyController;
@@ -9,7 +10,6 @@
 use App\Http\Controllers\TeamBillingController;
 use App\Http\Middleware\EnsureTeamSubscription;
 use Illuminate\Support\Facades\Route;
-use Inertia\Inertia;
 
 Route::get('/', function () {
     if (auth()->user()) {
@@ -36,9 +36,7 @@
     Route::middleware([
         EnsureTeamSubscription::class,
     ])->group(function () {
-        Route::get('/dashboard', function () {
-            return Inertia::render('Dashboard');
-        })->name('dashboard');
+        Route::get('/dashboard', [DashboardController::class, 'show'])->name('dashboard');
 
         Route::post('/swarms/{swarm}/update-docker-registries', [SwarmController::class, 'updateDockerRegistries'])->name('swarms.update-docker-registries');
         Route::post('/swarms/{swarm}/update-s3-storages', [SwarmController::class, 'updateS3Storages'])->name('swarms.update-s3-storages');