over naar uuids, policies, predefined mutations aan kunnen passen

resources/js/components/MutationList.vue

@@ -40,6 +40,16 @@ function updateStatus(mutationId: number, status: 'approved' | 'rejected') {
     );
 }
 
+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);
 
@@ -157,21 +167,30 @@ function getAmountClass(amount: number): string {
 
                 <!-- Owner Approve/Reject Actions -->
                 <div
-                    v-if="isOwner && mutation.status === 'pending'"
+                    v-if="isOwner && (mutation.status === 'pending' || mutation.status === 'approved')"
                     class="c-mutation-list__actions"
                 >
                     <button
+                        v-if="mutation.status === 'pending'"
                         @click="updateStatus(mutation.id, 'approved')"
                         class="c-mutation-list__approve-btn"
                     >
                         Approve
                     </button>
                     <button
+                        v-if="mutation.status === 'pending'"
                         @click="updateStatus(mutation.id, 'rejected')"
                         class="c-mutation-list__reject-btn"
                     >
                         Reject
                     </button>
+                    <button
+                        v-if="mutation.status !== 'voided'"
+                        @click="voidMutation(mutation.id)"
+                        class="c-mutation-list__void-btn"
+                    >
+                        Void
+                    </button>
                 </div>
 
                 <Chat :chat="mutation.chat" :dynamic-id="dynamicId" :participants="participants" />
@@ -290,6 +309,10 @@ function getAmountClass(amount: number): string {
     @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;
 }