wip

app/Http/Controllers/InertiaController.php

@@ -2,13 +2,21 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Project;
 use Inertia\Inertia;
 
 class InertiaController extends Controller
 {
-    public function show()
+    public function dashboard()
     {
         return Inertia::render('Dashboard', [
+            'projects' => Project::ownedByCurrentTeam()->orderBy('created_at')->get(['name', 'description','uuid']),
+        ]);
+    }
+
+    public function projects()
+    {
+        return Inertia::render('Projects', [
             'user' => 'test',
         ]);
     }

app/Http/Middleware/HandleInertiaRequests.php

@@ -36,7 +36,7 @@ public function version(Request $request): ?string
     public function share(Request $request): array
     {
         return array_merge(parent::share($request), [
-            //
+            'user' => $request->user(),
         ]);
     }
 }

app/Providers/RouteServiceProvider.php

@@ -35,7 +35,7 @@ public function boot(): void
                 ->group(base_path('routes/webhooks.php'));
 
             Route::middleware('web')
-                ->prefix('inertia')
+                ->prefix('next')
                 ->group(base_path('routes/inertia-web.php'));
 
             Route::middleware('web')

components.json

@@ -6,8 +6,8 @@
     "tailwind": {
         "config": "tailwind-inertia.config.js",
         "css": "resources/css/inertia.css",
-        "baseColor": "slate",
-        "cssVariables": true,
+        "baseColor": "neutral",
+        "cssVariables": false,
         "prefix": ""
     },
     "framework": "laravel",

composer.json

@@ -51,6 +51,7 @@
         "stevebauman/purify": "^6.2",
         "stripe/stripe-php": "^16.2.0",
         "symfony/yaml": "^7.1.6",
+        "tightenco/ziggy": "^2.5",
         "visus/cuid2": "^4.1.0",
         "yosymfony/toml": "^1.0",
         "zircote/swagger-php": "^5.0"

package.json

@@ -16,8 +16,8 @@
         "pusher-js": "8.4.0-rc2",
         "tailwind-scrollbar": "^3.1.0",
         "tailwindcss": "3.4.17",
-        "vite": "6.0.11",
-        "typescript": "^5.7.3"
+        "typescript": "^5.7.3",
+        "vite": "6.0.11"
     },
     "dependencies": {
         "@inertiajs/vue3": "^2.0.3",
@@ -33,6 +33,7 @@
         "radix-vue": "^1.9.13",
         "tailwind-merge": "^3.0.1",
         "tailwindcss-animate": "^1.0.7",
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "ziggy-js": "^2.5.1"
     }
-}
+}

resources/css/inertia.css

@@ -4,6 +4,7 @@
 @tailwind utilities;
 
 @layer base {
+
     :root {
         --background: 0 0% 100%;
         --foreground: 224 71.4% 4.1%;
@@ -31,8 +32,9 @@
 
         --border: 220 13% 91%;
         --input: 220 13% 91%;
+        --input-background: 220 13% 91%;
         --ring: 262.1 83.3% 57.8%;
-        --radius: 0.25rem;
+        --radius: 0.1rem;
 
         --sidebar-background: 0 0% 98%;
         --sidebar-foreground: 240 5.3% 26.1%;
@@ -45,7 +47,7 @@
     }
 
     .dark {
-        --background: 6.3 9.1% 6.3%;
+        --background: 0 0% 7%;
         --foreground: 210 20% 98%;
 
         --card: 224 71.4% 4.1%;
@@ -69,11 +71,12 @@
         --destructive: 0 62.8% 30.6%;
         --destructive-foreground: 210 20% 98%;
 
-        --border: 215 27.9% 16.9%;
-        --input: 215 27.9% 16.9%;
-        --ring: 263.4 70% 50.4%;
+        --border: 0 0% 13%;
+        --input: 0 0% 13%;
+        --input-background: 0 0% 9.4%;
+        --ring: 271 83% 51%;
 
-        --sidebar-background: 240 5.9% 10%;
+        --sidebar-background: 240 5.9% 100%;
         --sidebar-foreground: 240 4.8% 95.9%;
         --sidebar-primary: 224.3 76.3% 48%;
         --sidebar-primary-foreground: 0 0% 100%;
@@ -82,4 +85,4 @@
         --sidebar-border: 240 3.7% 15.9%;
         --sidebar-ring: 217.2 91.2% 59.8%;
     }
-}
+}

resources/js/Pages/Dashboard.vue

@@ -1,11 +1,37 @@
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
-import Sidebar from '@/components/Sidebar.vue'
-defineProps({ user: Object })
+import MainView from '@/components/MainView.vue'
+import { Link } from '@inertiajs/vue3'
+import type { User } from '@/types/UserType'
+import type { Project } from '@/types/ProjectType'
+import { ref, inject } from 'vue'
+import { Input } from '@/components/ui/input'
+import { useDebounceFn } from '@vueuse/core'
+const props = defineProps<{ user: User, projects: Project[] }>()
+
+const projects = ref(props.projects)
+const search = ref('')
+const debouncedSearch = useDebounceFn(searchProjects, 100)
+
+const route = inject('route')
+console.log(route('projects'))
+function searchProjects() {
+    projects.value = props.projects.filter(project => project.name.toLowerCase().includes(search.value.toLowerCase()))
+}
+
 </script>
 
 <template>
-    <Sidebar />
-    <p>Hello {{ user }}, welcome to your first Inertia app!</p>
-    <Button>Click me</Button>
+    <MainView>
+        <template #title>
+            Dashboard
+        </template>
+        <template #subtitle>Your self-hosted infrastructure.</template>
+        <Input size="xs" v-model="search" placeholder="Search" @update:model-value="debouncedSearch" />
+        <div v-for="project in projects" :key="project.uuid">
+            <Link :href="route('projects')" class="flex flex-col bg-coolgray-100 rounded-lg p-4 border dark:border-black hover:bg-coolgray-200 transition-all duration-300 cursor-pointer">
+                <h3 class="text-lg font-bold">{{ project.name }}</h3>
+                <p class="text-sm text-muted-foreground">{{ project.description }}</p>
+            </Link>
+        </div>
+    </MainView>
 </template>

resources/js/Pages/Projects.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import MainView from '@/components/MainView.vue'
+defineProps({ user: Object })
+</script>
+
+<template>
+    <MainView>
+        <template #title>
+            Projects
+        </template>
+        <template #subtitle>Manage your projects.</template>
+    </MainView>
+</template>