feature: UI improvements, migrate to Tailwind & optimize user data flow

Author: marcmarfer

app/Http/Controllers/Auth/EmailVerificationPromptController.php

@@ -16,7 +16,7 @@ class EmailVerificationPromptController extends Controller
     public function __invoke(Request $request): RedirectResponse|Response
     {
         return $request->user()->hasVerifiedEmail()
-                    ? redirect()->intended(route('dashboard', absolute: false))
+                    ? redirect()->intended(route('dashboard.show', absolute: false))
                     : Inertia::render('Auth/VerifyEmail', ['status' => session('status')]);
     }
 }

app/Http/Controllers/Auth/RegisteredUserController.php

@@ -46,6 +46,6 @@ public function store(Request $request): RedirectResponse
 
         Auth::login($user);
 
-        return redirect(route('dashboard', absolute: false));
+        return redirect(route('dashboard.show', absolute: false));
     }
 }

app/Http/Controllers/Auth/VerifyEmailController.php

@@ -15,13 +15,13 @@ class VerifyEmailController extends Controller
     public function __invoke(EmailVerificationRequest $request): RedirectResponse
     {
         if ($request->user()->hasVerifiedEmail()) {
-            return redirect()->intended(route('dashboard', absolute: false).'?verified=1');
+            return redirect()->intended(route('dashboard.show', absolute: false).'?verified=1');
         }
 
         if ($request->user()->markEmailAsVerified()) {
             event(new Verified($request->user()));
         }
 
-        return redirect()->intended(route('dashboard', absolute: false).'?verified=1');
+        return redirect()->intended(route('dashboard.show', absolute: false).'?verified=1');
     }
 }

app/Http/Controllers/UserController.php

@@ -3,12 +3,15 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Support\Facades\Auth;
+use Inertia\Inertia;
 
 class UserController extends Controller
 {
-    public function getUserLoggedIn()
+    public function show()
     {
         $userLogged = Auth::user();
-        return response()->json($userLogged);
+        return Inertia::render('Dashboard/Show', [
+            'user' => $userLogged
+        ]);
     }
 }

resources/js/Components/Tile.vue

@@ -1,63 +1,31 @@
 <script setup>
-import { router } from '@inertiajs/vue3';
+const emit = defineEmits(['click']);
 defineProps({
     title: String,
     description: String,
-    link: String,
-    width: String,
-    height: String,
-    bgColor: String,
 });
 </script>
 
 <template>
+    <div class="group shadow-xl rounded-xl h-40 cursor-pointer transition-all duration-300 ease-in-out hover:-translate-y-1" @click="emit('click')">
     <div 
-        @click="router.get(link)"
-        class="tile-container" 
-        :style="{
-            backgroundColor: bgColor || '#ffffff',
-            width: width || '100%',
-            height: height || '100%'
-        }"
+        class="relative flex flex-col justify-center items-start rounded-xl overflow-hidden text-white p-6 bg-gradient-to-br from-red-500 to-red-600 shadow-2xl h-full w-full" 
     >
-        <div class="tile-content">
-            <h3 class="tile-title">{{ title }}</h3>
-            <p class="tile-description">{{ description }}</p>
+        <div class="relative z-10 w-full">
+            <h3 class="text-lg sm:text-xl font-bold mb-1">{{ title }}</h3>
+            <p class="text-sm text-white/80">{{ description }}</p>
+        </div>
+        
+        <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-all duration-300 ease-in-out"></div>
+        
+        <div class="absolute bottom-4 right-4 opacity-50 group-hover:opacity-100 transition-all duration-300 transform group-hover:translate-x-1">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
         </div>
     </div>
+</div>
 </template>
 
-
 <style scoped>
-.tile-container {
-    color: white;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    box-shadow: rgba(0, 0, 0, 0.3) 10px 10px 15px;
-    cursor: pointer;
-    overflow: hidden;
-    transition: transform 0.3s ease;
-    border-radius: 20px;
-}
-
-.tile-container:hover {
-    transform: scale(1.05);
-
-}
-
-.tile-content {
-    text-align: center;
-}
-
-.tile-title {
-    font-size: 1.5rem;
-    font-weight: bold;
-}
-
-.tile-description {
-    font-size: 1rem;
-    color: #dfdfdf;
-}
 </style>

resources/js/Layouts/AuthenticatedLayout.vue

@@ -22,7 +22,7 @@ const showingNavigationDropdown = ref(false);
                         <div class="flex">
                             <!-- Logo -->
                             <div class="flex shrink-0 items-center">
-                                <Link :href="route('dashboard')">
+                                <Link :href="route('dashboard.show')">
                                     <ApplicationLogo
                                         class="block h-9 w-auto fill-current text-gray-800"
                                     />
@@ -34,7 +34,7 @@ const showingNavigationDropdown = ref(false);
                                 class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex"
                             >
                                 <NavLink
-                                    :href="route('dashboard')"
+                                    :href="route('dashboard.show')"
                                     :active="route().current('dashboard')"
                                 >
                                     Dashboard
@@ -141,7 +141,7 @@ const showingNavigationDropdown = ref(false);
                 >
                     <div class="space-y-1 pb-3 pt-2">
                         <ResponsiveNavLink
-                            :href="route('dashboard')"
+                            :href="route('dashboard.show')"
                             :active="route().current('dashboard')"
                         >
                             Dashboard

resources/js/Pages/Dashboard.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { Head, router } from '@inertiajs/vue3';
+import Tile from '@/Components/Tile.vue';
+
+const props = defineProps({
+    user: Object,
+    required: true
+});
+
+const navigateToClients = () => router.get('/clients');
+const navigateToVehicles = () => router.get('/vehicles');
+const navigateToRepairs = () => router.get('/repairs');
+const navigateToBuys = () => router.get('/buys');
+</script>
+
+<template>
+    <Head title="Dashboard" />
+    
+    <div class="min-h-screen flex flex-col px-4 py-12 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto w-full">
+            <h1 class="text-black text-center text-2xl sm:text-3xl font-bold mb-12">
+                Bienvenido a <span class="text-red-600">Neumatrans</span>, {{ props.user.name }}
+            </h1>
+            
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                <Tile
+                    title="Clientes"
+                    description="Gestión de clientes"
+                    @click="navigateToClients"
+                />
+                <Tile
+                    title="Vehículos"
+                    description="Gestión de vehículos"
+                    @click="navigateToVehicles"
+                />
+                <Tile
+                    title="Reparaciones"
+                    description="Gestión de reparaciones"
+                    @click="navigateToRepairs"
+                />
+                <Tile
+                    title="Compras"
+                    description="Gestión de compras"
+                    @click="navigateToBuys"
+                />
+                <Tile
+                    title="Compras"
+                    description="Gestión de reparaciones"
+                    @click="navigateToBuys"
+                />
+                <Tile
+                    title="Compras"
+                    description="Gestión de compras"
+                    @click="navigateToBuys"
+                />
+            </div>
+        </div>
+    </div>
+</template>

resources/js/Pages/Dashboard/Show.vue

@@ -57,7 +57,7 @@ function handleImageError() {
                     <nav v-if="canLogin" class="-mx-3 flex flex-1 justify-end">
                         <Link
                             v-if="$page.props.auth.user"
-                            :href="route('dashboard')"
+                            :href="route('dashboard.show')"
                             class="rounded-md px-3 py-2 text-black ring-1 ring-transparent transition hover:text-black/70 focus:outline-none focus-visible:ring-[#FF2D20] dark:text-white dark:hover:text-white/80 dark:focus-visible:ring-white"
                         >
                             Dashboard

resources/js/Pages/Welcome.vue

@@ -18,19 +18,13 @@
     ]);
 });
 
-Route::get('/dashboard', function () {
-    return Inertia::render('Dashboard');
-})->middleware(['auth', 'verified'])->name('dashboard');
-
-Route::middleware('auth')->group(function () {
+Route::middleware(['auth', 'verified'])->group(function () {
+    Route::get('/dashboard', [UserController::class, 'show'])->name('dashboard.show');
     Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
     Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
     Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
 });
 
-//API routes
-Route::get('/api/user-logged-in', [UserController::class, 'getUserLoggedIn'])->name('user-logged-in');
-
 //pages routes
 Route::get('/clients', [ClientController::class, 'index'])->name('clients');
 Route::get('/vehicles', [VehicleController::class, 'index'])->name('vehicles');