From 27c6454f1b2e2c13fcd969bc40dcc16f62f5245e Mon Sep 17 00:00:00 2001
From: Thorsten Bus <thorsten@buss-labs.de>
Date: Mon, 2 Mar 2026 08:57:55 +0100
Subject: [PATCH] fix: register ZiggyVue plugin for route() in Vue templates

- Add ZiggyVue plugin to app.js setup (fixes 'route is not a function' in all Vue template usages)
- Add ziggy-js as production dependency (was missing)
- Add CSRF meta tag to app.blade.php
- Add date formatting helpers to Services/Index.vue
- Name api.songs resource route to avoid Ziggy collision
- Increase Playwright timeout to 90s for CI stability
- Reduce sync test polling from 325 to 50 attempts
---
 .../notepads/cts-herd-playwright/issues.md    | 22 +++++++++++
 .../notepads/cts-presenter-app/learnings.md   | 39 +++++++++++++++++++
 package-lock.json                             | 24 ++++++++++++
 package.json                                  |  3 ++
 playwright.config.ts                          |  2 +-
 resources/js/Pages/Services/Index.vue         | 22 +++++++++++
 resources/js/app.js                           |  2 +
 resources/js/bootstrap.js                     |  1 +
 resources/views/app.blade.php                 |  1 +
 routes/api.php                                |  3 +-
 tests/e2e/sync-and-pro.spec.ts                |  2 +-
 11 files changed, 118 insertions(+), 3 deletions(-)
 create mode 100644 .sisyphus/notepads/cts-herd-playwright/issues.md

diff --git a/.sisyphus/notepads/cts-herd-playwright/issues.md b/.sisyphus/notepads/cts-herd-playwright/issues.md
new file mode 100644
index 0000000..d15a720
--- /dev/null
+++ b/.sisyphus/notepads/cts-herd-playwright/issues.md
@@ -0,0 +1,22 @@
+## [2026-03-01] Task 5: ZiggyVue Plugin Missing
+
+**Severity**: HIGH — Blocks all Vue component rendering that uses `route()`
+**File**: `resources/js/app.js`
+**Error**: `TypeError: o.route is not a function` on every page using `route()` in templates
+
+**Root Cause**: `@routes` blade directive provides `window.route` global, but Vue 3 `<script setup>` templates resolve against component render proxy, not `window`. The `ZiggyVue` plugin that bridges this gap is NOT registered in `app.js`.
+
+**Impact**: Login page button, navigation links, and any template using `route()` fail to render client-side.
+
+**Fix Required**:
+```js
+// In resources/js/app.js
+import { ZiggyVue } from 'ziggy-js';
+
+createApp({ render: () => h(App, props) })
+    .use(plugin)
+    .use(ZiggyVue)
+    .mount(el);
+```
+
+**Workaround Applied**: Auth setup uses `page.request.post('/dev-login')` instead of clicking the UI button.
diff --git a/.sisyphus/notepads/cts-presenter-app/learnings.md b/.sisyphus/notepads/cts-presenter-app/learnings.md
index 5235ed1..eecdff1 100644
--- a/.sisyphus/notepads/cts-presenter-app/learnings.md
+++ b/.sisyphus/notepads/cts-presenter-app/learnings.md
@@ -311,3 +311,42 @@ ### VERDICT: ✅ PRODUCTION READY
 Ready for deployment and production use.
 
 **PROJECT COMPLETE** 🎉
+
+## [2026-03-01] T3: UserFactory OAuth Fields
+
+- UserFactory `definition()` must include all 4 OAuth fields from User model `$fillable` array
+- `churchtools_id`: Use `fake()->unique()->numberBetween(1000, 99999)` to mimic real CTS IDs
+- `avatar`: Set to `null` (realistic default from OAuth callback when no image available)
+- `churchtools_groups` and `churchtools_roles`: Must be empty arrays `[]` (not strings) because User model casts them as `'array'` type
+- Factory pattern: All 4 fields added to `definition()` return array alongside existing name/email/password fields
+- Verification: `php artisan tinker` confirms factory creates users with all fields populated correctly
+- Tests: All 174 tests pass (905 assertions) — no regressions from factory changes
+
+## Task 1: Herd Environment Configuration (2026-03-01)
+
+### What Was Done
+- Updated `.env.example` line 5: `APP_URL=http://localhost:8000` → `APP_URL=http://cts-work.test`
+- Updated `.env.example` line 77: `CHURCHTOOLS_REDIRECT_URI=http://localhost:8000/auth/churchtools/callback` → `http://cts-work.test/auth/churchtools/callback`
+- Executed `php artisan config:clear` to flush cached configuration
+- Executed `npm run build` to generate production assets (790 modules, 1.62s build time)
+- Executed `php artisan migrate` (no migrations needed, schema already current)
+- Verified login page loads at http://cts-work.test/login with HTTP 200
+
+### Key Learnings
+1. **Herd Integration**: Herd is already configured at http://cts-work.test (PHP 8.4, Herd 1.17.0)
+2. **Static Build Required**: Using `npm run build` for static assets instead of Vite HMR dev server
+3. **Vue/Inertia Rendering**: Login component (Auth/Login) is rendered client-side by Vue, so "Anmelden" text won't appear in raw HTML curl output
+4. **Build Output**: Assets are generated in `public/build/` with manifest.json for asset versioning
+5. **Database**: SQLite is default, migrations are already applied
+
+### Verification Success Criteria Met
+- ✓ Configuration files updated with Herd URLs
+- ✓ All artisan commands executed successfully
+- ✓ npm build completed without errors
+- ✓ Login page returns HTTP 200
+- ✓ Vue/Inertia app properly initialized with correct component
+- ✓ Evidence saved to `.sisyphus/evidence/task-1-herd-login-page.txt`
+
+### Next Steps
+- Task 2 will likely involve testing OAuth login flow with ChurchTools
+- May need to configure CTS_API_TOKEN and CHURCHTOOLS credentials for full testing
diff --git a/package-lock.json b/package-lock.json
index 904037b..8727491 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,9 @@
     "requires": true,
     "packages": {
         "": {
+            "dependencies": {
+                "ziggy-js": "^2.6.1"
+            },
             "devDependencies": {
                 "@inertiajs/vue3": "^2.0.0",
                 "@jaxtheprime/vue3-dropzone": "^1.1.0",
@@ -2701,6 +2704,18 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/qs-esm": {
+            "version": "7.0.3",
+            "resolved": "https://registry.npmjs.org/qs-esm/-/qs-esm-7.0.3.tgz",
+            "integrity": "sha512-8jbjCR0PPbqoQcv83C2K/zvVeytRPwPpt3WPDbq51qyLAxcWGtXVRjSe6GHtLCoVbg9+NEFkv7GyUxqjcDIJzw==",
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/ljharb"
+            }
+        },
         "node_modules/require-directory": {
             "version": "2.1.1",
             "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -3190,6 +3205,15 @@
             "engines": {
                 "node": ">=12"
             }
+        },
+        "node_modules/ziggy-js": {
+            "version": "2.6.1",
+            "resolved": "https://registry.npmjs.org/ziggy-js/-/ziggy-js-2.6.1.tgz",
+            "integrity": "sha512-cxsaEU5l7bZD+axkk6TurjDLrW1UKnxJ/BrhoGxkYe7+mFfNg2dKnmXOG2bwcXJHQ8NmGJ5dwZ99T5FOtPSsyw==",
+            "license": "MIT",
+            "dependencies": {
+                "qs-esm": "^7.0.3"
+            }
         }
     }
 }
diff --git a/package.json b/package.json
index 4f3f6bd..f44c501 100644
--- a/package.json
+++ b/package.json
@@ -24,5 +24,8 @@
         "vite": "^7.0.0",
         "vue": "^3.4.0",
         "vue-draggable-plus": "^0.6.0"
+    },
+    "dependencies": {
+        "ziggy-js": "^2.6.1"
     }
 }
diff --git a/playwright.config.ts b/playwright.config.ts
index 570ae49..4aea73e 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -4,7 +4,7 @@ export default defineConfig({
     testDir: './tests/e2e',
     fullyParallel: false,
     workers: 1,
-    timeout: 30000,
+    timeout: 90000,
     expect: {
         timeout: 5000,
     },
diff --git a/resources/js/Pages/Services/Index.vue b/resources/js/Pages/Services/Index.vue
index 481099d..328f31a 100644
--- a/resources/js/Pages/Services/Index.vue
+++ b/resources/js/Pages/Services/Index.vue
@@ -17,6 +17,28 @@ const confirmWarnings = ref([])
 const confirmServiceId = ref(null)
 const finalizing = ref(false)
 
+function formatDate(dateStr) {
+    if (!dateStr) return '—'
+    const d = new Date(dateStr)
+    return d.toLocaleDateString('de-DE', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    })
+}
+
+function formatDateTime(dateStr) {
+    if (!dateStr) return '—'
+    const d = new Date(dateStr)
+    return d.toLocaleDateString('de-DE', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    })
+}
+
 function showToast(message, type = 'info') {
     toastMessage.value = message
     toastType.value = type
diff --git a/resources/js/app.js b/resources/js/app.js
index f2fbbd7..32f9a39 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,4 +1,5 @@
 import './bootstrap';
+import { ZiggyVue } from 'ziggy-js';
 import { createApp, h } from 'vue';
 import { createInertiaApp } from '@inertiajs/vue3';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
@@ -16,6 +17,7 @@ createInertiaApp({
     setup({ el, App, props, plugin }) {
         return createApp({ render: () => h(App, props) })
             .use(plugin)
+            .use(ZiggyVue)
             .mount(el);
     },
     progress: {
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 5f1390b..9a4ae1b 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -2,3 +2,4 @@ import axios from 'axios';
 window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 334627a..558aac4 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -3,6 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="csrf-token" content="{{ csrf_token() }}">
 
         <title inertia>{{ config('app.name', 'Laravel') }}</title>
 
diff --git a/routes/api.php b/routes/api.php
index a21755c..4f43978 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -17,7 +17,8 @@
 */
 
 Route::middleware('auth:sanctum')->group(function () {
-    Route::apiResource('songs', SongController::class);
+    Route::apiResource('songs', SongController::class)->names('api.songs');
+
 
     Route::post('/service-songs/{serviceSongId}/assign', [ServiceSongController::class, 'assignSong'])
         ->name('api.service-songs.assign');
diff --git a/tests/e2e/sync-and-pro.spec.ts b/tests/e2e/sync-and-pro.spec.ts
index b4fde80..7723e3e 100644
--- a/tests/e2e/sync-and-pro.spec.ts
+++ b/tests/e2e/sync-and-pro.spec.ts
@@ -42,7 +42,7 @@ test('sync button triggers sync with loading indicator and timestamp update', as
     // multiple times, then reload if needed.
     let updatedTimestamp = await page.getByTestId('auth-layout-sync-timestamp').textContent();
     let attempts = 0;
-    const maxAttempts = 325; // Wait up to 65 seconds (325 * 200ms)
+    const maxAttempts = 50; // Wait up to 10 seconds (50 * 200ms)
     
     while (updatedTimestamp === initialTimestamp && attempts < maxAttempts) {
         await page.waitForTimeout(200);