From 2ab1acf0409621958d4b5898b06b3612f3a91fff Mon Sep 17 00:00:00 2001
From: Daan Meijer <daan@studioseptember.nl>
Date: Mon, 6 Jul 2026 17:47:14 +0200
Subject: [PATCH] mutations hebben single

---
 app/Http/Controllers/MutationController.php |  15 ++
 app/Policies/MutationPolicy.php             |  14 +-
 resources/js/components/MutationList.vue    | 213 ++----------------
 resources/js/pages/Mutations/Show.vue       | 236 ++++++++++++++++++++
 4 files changed, 282 insertions(+), 196 deletions(-)
 create mode 100644 resources/js/pages/Mutations/Show.vue

diff --git a/app/Http/Controllers/MutationController.php b/app/Http/Controllers/MutationController.php
index 8bf5993..39e162c 100644
--- a/app/Http/Controllers/MutationController.php
+++ b/app/Http/Controllers/MutationController.php
@@ -72,6 +72,21 @@ class MutationController extends Controller
         return redirect()->route('dynamics.ledgers.show', [$dynamic, $ledger]);
     }
 
+    public function show(Request $request, Dynamic $dynamic, Ledger $ledger, Mutation $mutation)
+    {
+        $this->authorize('view', $mutation);
+
+        $mutation->load('user', 'ledger', 'media', 'chat.messages.user');
+        $dynamic = $mutation->ledger->dynamic;
+
+        $dynamic->load('participants');
+
+        return inertia('Mutations/Show', [
+            'mutation' => $mutation,
+            'dynamic' => $dynamic,
+        ]);
+    }
+
     public function update(Request $request, Dynamic $dynamic, Ledger $ledger, Mutation $mutation)
     {
         $this->authorize('update', $mutation);
diff --git a/app/Policies/MutationPolicy.php b/app/Policies/MutationPolicy.php
index 8579a0b..691125e 100644
--- a/app/Policies/MutationPolicy.php
+++ b/app/Policies/MutationPolicy.php
@@ -8,6 +8,14 @@ use App\Models\User;
 
 class MutationPolicy
 {
+    /**
+     * Determine whether the user can view the mutation.
+     */
+    public function view(User $user, Mutation $mutation): bool
+    {
+        return $user->can('view', $mutation->ledger);
+    }
+
     /**
      * Determine whether the user can create mutations.
      */
@@ -18,12 +26,6 @@ class MutationPolicy
         return $dynamic->participants()->where('user_id', $user->id)->exists();
     }
 
-    public function view(User $user, Mutation $mutation): bool
-    {
-        $ledger = $mutation->ledger;
-        return $user->can('view', $ledger);
-    }
-
     /**
      * Determine whether the user can update the mutation.
      */
diff --git a/resources/js/components/MutationList.vue b/resources/js/components/MutationList.vue
index ba8bd74..4fff8c8 100644
--- a/resources/js/components/MutationList.vue
+++ b/resources/js/components/MutationList.vue
@@ -1,64 +1,22 @@
 <script setup lang="ts">
-import { useForm } from '@inertiajs/vue3';
+import { Link } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
-import Chat from '@/components/Chat.vue';
 
 const props = defineProps<{
     dynamicId: string;
     ledgerId: string;
     ledgerAlignment?: string;
     mutations: Array<{
-        id: number;
+        id: string; // Now a UUID
         user_id: number;
         user: { name: string };
         amount: number;
         description: string;
         status: string;
         created_at: string;
-        chat: any;
-        media?: Array<{ id: number; url: string; mime_type: string }>;
-        can: {
-            update: boolean;
-            void: boolean;
-        };
-    }>;
-    participants?: Array<{
-        id: number;
-        name: string;
-        pivot?: { role: string };
     }>;
 }>();
 
-const emit = defineEmits<{
-    (e: 'open-lightbox', url: string, mimeType: string): void;
-}>();
-
-function updateStatus(mutationId: number, status: 'approved' | 'rejected') {
-    useForm({ status }).put(
-        route('dynamics.ledgers.mutations.update', {
-            dynamic: props.dynamicId,
-            ledger: props.ledgerId,
-            mutation: mutationId,
-        }),
-    );
-}
-
-function voidMutation(mutationId: number) {
-    useForm({}).put(
-        route('dynamics.ledgers.mutations.void', {
-            dynamic: props.dynamicId,
-            ledger: props.ledgerId,
-            mutation: mutationId,
-        }),
-    );
-}
-
-function isOwnerUser(userId: number): boolean {
-    const participant = props.participants?.find((p) => p.id === userId);
-
-    return participant?.pivot?.role === 'owner';
-}
-
 function getAmountClass(amount: number): string {
     const alignment = props.ledgerAlignment || 'neutral';
 
@@ -87,18 +45,15 @@ function getAmountClass(amount: number): string {
             <li
                 v-for="mutation in mutations"
                 :key="mutation.id"
-                class="c-mutation-list__item"
             >
-                <div class="c-mutation-list__item-header">
-                    <div>
-                        <span class="c-mutation-list__item-author">
-                            {{
-                                isOwnerUser(mutation.user_id)
-                                    ? 'Added by'
-                                    : 'Suggested by'
-                            }}
-                            {{ mutation.user.name }}
-                        </span>
+                <Link
+                    :href="route('dynamics.ledgers.mutations.show', { dynamic: dynamicId, ledger: ledgerId, mutation: mutation.id })"
+                    class="c-mutation-list__item-link"
+                >
+                    <div class="c-mutation-list__item-content">
+                        <p class="c-mutation-list__item-desc">
+                            {{ mutation.description }}
+                        </p>
                         <div class="c-mutation-list__item-meta">
                             <span
                                 :class="getAmountClass(mutation.amount)"
@@ -107,10 +62,8 @@ function getAmountClass(amount: number): string {
                                 {{ mutation.amount > 0 ? '+' : ''
                                 }}{{ mutation.amount }}
                             </span>
-                            <!-- Only show status badge if mutation was NOT auto-approved by an owner -->
-                            <span
-                                v-if="!isOwnerUser(mutation.user_id)"
-                                :class="{
+                             <span
+                                 :class="{
                                     'c-mutation-list__item-status--pending':
                                         mutation.status === 'pending',
                                     'c-mutation-list__item-status--approved':
@@ -118,85 +71,13 @@ function getAmountClass(amount: number): string {
                                     'c-mutation-list__item-status--rejected':
                                         mutation.status === 'rejected',
                                 }"
-                                class="c-mutation-list__item-status"
-                            >
+                                 class="c-mutation-list__item-status"
+                             >
                                 {{ mutation.status }}
                             </span>
                         </div>
                     </div>
-                    <div class="c-mutation-list__item-time">
-                        {{ new Date(mutation.created_at).toLocaleString() }}
-                    </div>
-                </div>
-                <p class="c-mutation-list__item-desc">
-                    {{ mutation.description }}
-                </p>
-
-                <!-- Attached Mutation Proof Media -->
-                <div
-                    v-if="mutation.media && mutation.media.length > 0"
-                    class="c-mutation-list__media-list"
-                >
-                    <div
-                        v-for="item in mutation.media"
-                        :key="item.id"
-                        class="c-mutation-list__media-item"
-                    >
-                        <img
-                            v-if="item.mime_type.startsWith('image/')"
-                            :src="item.url"
-                            class="c-mutation-list__media-img"
-                            @click="
-                                emit('open-lightbox', item.url, item.mime_type)
-                            "
-                        />
-                        <div
-                            v-else-if="item.mime_type.startsWith('video/')"
-                            class="c-mutation-list__media-video-wrapper"
-                            @click="
-                                emit('open-lightbox', item.url, item.mime_type)
-                            "
-                        >
-                            <video
-                                :src="item.url"
-                                class="c-mutation-list__media-video"
-                            ></video>
-                            <div class="c-mutation-list__media-video-overlay">
-                                ▶
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Owner Approve/Reject Actions -->
-                <div
-                    v-if="mutation.can?.update || mutation.can?.void"
-                    class="c-mutation-list__actions"
-                >
-                    <button
-                        v-if="mutation.can?.update"
-                        @click="updateStatus(mutation.id, 'approved')"
-                        class="c-mutation-list__approve-btn"
-                    >
-                        Approve
-                    </button>
-                    <button
-                        v-if="mutation.can?.update"
-                        @click="updateStatus(mutation.id, 'rejected')"
-                        class="c-mutation-list__reject-btn"
-                    >
-                        Reject
-                    </button>
-                    <button
-                        v-if="mutation.can?.void"
-                        @click="voidMutation(mutation.id)"
-                        class="c-mutation-list__void-btn"
-                    >
-                        Void
-                    </button>
-                </div>
-
-                <Chat v-if="mutation.chat" :chat="mutation.chat" :dynamic-id="dynamicId" :participants="participants" />
+                </Link>
             </li>
         </ul>
         <div v-if="mutations.length === 0" class="c-mutation-list__empty">
@@ -217,23 +98,23 @@ function getAmountClass(amount: number): string {
 }
 
 .c-mutation-list__list {
-    @apply mt-4 space-y-4;
+    @apply mt-4 space-y-2;
 }
 
-.c-mutation-list__item {
-    @apply overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800;
+.c-mutation-list__item-link {
+    @apply block overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800 transition-all duration-200 hover:shadow-md hover:bg-gray-50 dark:hover:bg-gray-700;
 }
 
-.c-mutation-list__item-header {
-    @apply flex items-start justify-between;
+.c-mutation-list__item-content {
+    @apply flex items-center justify-between;
 }
 
-.c-mutation-list__item-author {
-    @apply font-semibold;
+.c-mutation-list__item-desc {
+    @apply text-sm text-gray-600 dark:text-gray-400;
 }
 
 .c-mutation-list__item-meta {
-    @apply mt-1 flex items-center gap-2;
+    @apply flex items-center gap-2;
 }
 
 .c-mutation-list__item-amount {
@@ -268,54 +149,6 @@ function getAmountClass(amount: number): string {
     @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
 }
 
-.c-mutation-list__item-time {
-    @apply text-xs text-gray-500;
-}
-
-.c-mutation-list__item-desc {
-    @apply mt-3 text-sm text-gray-600 dark:text-gray-400;
-}
-
-.c-mutation-list__media-list {
-    @apply mt-3 flex flex-wrap gap-2;
-}
-
-.c-mutation-list__media-item {
-    @apply max-w-[200px] overflow-hidden rounded-md border border-neutral-200 bg-black dark:border-neutral-700;
-}
-
-.c-mutation-list__media-img {
-    @apply h-auto max-h-[150px] w-full cursor-pointer object-cover transition-opacity hover:opacity-90;
-}
-
-.c-mutation-list__media-video-wrapper {
-    @apply relative cursor-pointer transition-opacity hover:opacity-90;
-}
-
-.c-mutation-list__media-video {
-    @apply h-auto max-h-[150px] w-full;
-}
-
-.c-mutation-list__media-video-overlay {
-    @apply absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white;
-}
-
-.c-mutation-list__actions {
-    @apply mt-3 flex gap-2 border-t border-neutral-100 pt-3 dark:border-neutral-700;
-}
-
-.c-mutation-list__approve-btn {
-    @apply inline-flex cursor-pointer items-center rounded bg-green-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-green-500;
-}
-
-.c-mutation-list__reject-btn {
-    @apply inline-flex cursor-pointer items-center rounded bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-500;
-}
-
-.c-mutation-list__void-btn {
-    @apply inline-flex cursor-pointer items-center rounded bg-gray-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-gray-500;
-}
-
 .c-mutation-list__empty {
     @apply mt-4 text-gray-500;
 }
diff --git a/resources/js/pages/Mutations/Show.vue b/resources/js/pages/Mutations/Show.vue
new file mode 100644
index 0000000..3308bb4
--- /dev/null
+++ b/resources/js/pages/Mutations/Show.vue
@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import Chat from '@/components/Chat.vue';
+import { defineOptions } from 'vue';
+
+const props = defineProps<{
+    mutation: {
+        id: number;
+        user_id: number;
+        user: { name: string };
+        amount: number;
+        description: string;
+        status: string;
+        created_at: string;
+        chat: any;
+        media?: Array<{ id: number; url: string; mime_type: string }>;
+        can: {
+            update: boolean;
+            void: boolean;
+        };
+        ledger: {
+            id: string;
+            name: string;
+            dynamic_id: string;
+            dynamic: {
+                id: string;
+                name: string;
+            }
+        }
+    };
+    dynamic: object;
+}>();
+
+const dynamicId = props.dynamic.id;
+
+function isOwnerUser(userId: number): boolean {
+    // In this context, we don't have the participants list,
+    // so we can't reliably determine the role.
+    // For now, we'll just base it on something simple,
+    // but this might need adjustment.
+    return false;
+}
+
+function getAmountClass(amount: number): string {
+    const alignment = props.mutation.ledger.alignment || 'neutral';
+
+    if (alignment === 'positive') {
+        return amount > 0
+            ? 'c-mutation-list__item-amount--positive'
+            : 'c-mutation-list__item-amount--negative';
+    }
+
+    if (alignment === 'negative') {
+        return amount < 0
+            ? 'c-mutation-list__item-amount--positive'
+            : 'c-mutation-list__item-amount--negative';
+    }
+
+    return 'c-mutation-list__item-amount--neutral';
+}
+
+defineOptions({
+    layout: (props: any) => ({
+        breadcrumbs: [
+            { title: 'Dynamics', href: route('dynamics.index') },
+            { title: props.mutation.ledger.dynamic.name, href: route('dynamics.show', props.mutation.ledger.dynamic.id) },
+            { title: props.mutation.ledger.name, href: route('dynamics.ledgers.show', [props.mutation.ledger.dynamic.id, props.mutation.ledger.id]) },
+            { title: 'Mutation Details', href: '' },
+        ]
+    })
+});
+
+</script>
+
+<template>
+    <div class="c-mutation-list__item">
+        <div class="c-mutation-list__item-header">
+            <div>
+                <span class="c-mutation-list__item-author">
+                    {{
+                        isOwnerUser(mutation.user_id)
+                            ? 'Added by'
+                            : 'Suggested by'
+                    }}
+                    {{ mutation.user.name }}
+                </span>
+                <div class="c-mutation-list__item-meta">
+                    <span
+                        :class="getAmountClass(mutation.amount)"
+                        class="c-mutation-list__item-amount"
+                    >
+                        {{ mutation.amount > 0 ? '+' : ''
+                        }}{{ mutation.amount }}
+                    </span>
+                    <span
+                        v-if="!isOwnerUser(mutation.user_id)"
+                        :class="{
+                            'c-mutation-list__item-status--pending':
+                                mutation.status === 'pending',
+                            'c-mutation-list__item-status--approved':
+                                mutation.status === 'approved',
+                            'c-mutation-list__item-status--rejected':
+                                mutation.status === 'rejected',
+                        }"
+                        class="c-mutation-list__item-status"
+                    >
+                        {{ mutation.status }}
+                    </span>
+                </div>
+            </div>
+            <div class="c-mutation-list__item-time">
+                {{ new Date(mutation.created_at).toLocaleString() }}
+            </div>
+        </div>
+        <p class="c-mutation-list__item-desc">
+            {{ mutation.description }}
+        </p>
+
+        <div
+            v-if="mutation.media && mutation.media.length > 0"
+            class="c-mutation-list__media-list"
+        >
+            <div
+                v-for="item in mutation.media"
+                :key="item.id"
+                class="c-mutation-list__media-item"
+            >
+                <img
+                    v-if="item.mime_type.startsWith('image/')"
+                    :src="item.url"
+                    class="c-mutation-list__media-img"
+                />
+                <div
+                    v-else-if="item.mime_type.startsWith('video/')"
+                    class="c-mutation-list__media-video-wrapper"
+                >
+                    <video
+                        :src="item.url"
+                        class="c-mutation-list__media-video"
+                    ></video>
+                    <div class="c-mutation-list__media-video-overlay">
+                        ▶
+                    </div>
+                </div>
+            </div>
+        </div>
+        <Chat v-if="mutation.chat"
+              :chat="mutation.chat"
+              :participants="dynamic.participants"
+              :dynamic-id="dynamicId"
+        />
+    </div>
+</template>
+
+<style scoped>
+@reference "../../../css/app.css";
+
+.c-mutation-list__item {
+    @apply overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800;
+}
+
+.c-mutation-list__item-header {
+    @apply flex items-start justify-between;
+}
+
+.c-mutation-list__item-author {
+    @apply font-semibold;
+}
+
+.c-mutation-list__item-meta {
+    @apply mt-1 flex items-center gap-2;
+}
+
+.c-mutation-list__item-amount {
+    @apply text-sm font-bold;
+}
+
+.c-mutation-list__item-amount--positive {
+    @apply text-green-500;
+}
+
+.c-mutation-list__item-amount--negative {
+    @apply text-red-500;
+}
+
+.c-mutation-list__item-amount--neutral {
+    @apply text-gray-500 dark:text-gray-400;
+}
+
+.c-mutation-list__item-status {
+    @apply rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wider uppercase;
+}
+
+.c-mutation-list__item-status--pending {
+    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
+}
+
+.c-mutation-list__item-status--approved {
+    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
+}
+
+.c-mutation-list__item-status--rejected {
+    @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
+}
+
+.c-mutation-list__item-time {
+    @apply text-xs text-gray-500;
+}
+
+.c-mutation-list__item-desc {
+    @apply mt-3 text-sm text-gray-600 dark:text-gray-400;
+}
+
+.c-mutation-list__media-list {
+    @apply mt-3 flex flex-wrap gap-2;
+}
+
+.c-mutation-list__media-item {
+    @apply max-w-[200px] overflow-hidden rounded-md border border-neutral-200 bg-black dark:border-neutral-700;
+}
+
+.c-mutation-list__media-img {
+    @apply h-auto max-h-[150px] w-full cursor-pointer object-cover transition-opacity hover:opacity-90;
+}
+
+.c-mutation-list__media-video-wrapper {
+    @apply relative cursor-pointer transition-opacity hover:opacity-90;
+}
+
+.c-mutation-list__media-video {
+    @apply h-auto max-h-[150px] w-full;
+}
+
+.c-mutation-list__media-video-overlay {
+    @apply absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white;
+}
+</style>