added actions back to mutation single

app/Http/Controllers/MutationController.php

@@ -81,9 +81,14 @@ class MutationController extends Controller
 
         $dynamic->load('participants');
 
+        $user = $request->user();
+
         return inertia('Mutations/Show', [
             'mutation' => $mutation,
             'dynamic' => $dynamic,
+            'can' => [
+                'update' => $user->can('update', $dynamic),
+            ],
         ]);
     }
 

resources/js/pages/Mutations/Show.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import Chat from '@/components/Chat.vue';
 import { defineOptions } from 'vue';
+import { useForm } from '@inertiajs/vue3';
+import { route } from 'ziggy-js';
 
 const props = defineProps<{
     mutation: {
-        id: number;
+        id: string; // Updated to match serialization
         user_id: number;
         user: { name: string };
         amount: number;
@@ -21,23 +23,48 @@ const props = defineProps<{
             id: string;
             name: string;
             dynamic_id: string;
+            alignment?: string;
             dynamic: {
                 id: string;
                 name: string;
             }
         }
     };
-    dynamic: object;
+    dynamic: {
+        id: string;
+        participants: any[];
+    };
+    can: {
+        update: boolean;
+    };
 }>();
 
 const dynamicId = props.dynamic.id;
 
+function updateStatus(mutationId: string, status: 'approved' | 'rejected') {
+    useForm({ status }).put(
+        route('dynamics.ledgers.mutations.update', {
+            dynamic: props.dynamic.id,
+            ledger: props.mutation.ledger.id,
+            mutation: mutationId,
+        }),
+    );
+}
+
+function voidMutation(mutationId: string) {
+    useForm({}).put(
+        route('dynamics.ledgers.mutations.void', {
+            dynamic: props.dynamic.id,
+            ledger: props.mutation.ledger.id,
+            mutation: mutationId,
+        }),
+    );
+}
+
 function isOwnerUser(userId: number): boolean {
-    // In this context, we don't have the participants list,
+    const participant = props.dynamic.participants?.find((p) => p.id === userId);
-    // so we can't reliably determine the role.
+
-    // For now, we'll just base it on something simple,
+    return participant?.pivot?.role === 'owner';
-    // but this might need adjustment.
-    return false;
 }
 
 function getAmountClass(amount: number): string {
@@ -143,6 +170,35 @@ defineOptions({
                 </div>
             </div>
         </div>
+
+        <!-- Owner Approve/Reject/Void 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"
               :participants="dynamic.participants"
@@ -233,4 +289,20 @@ defineOptions({
 .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 mb-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;
+}
 </style>