ledgerrz/resources/js/components/MutationList.vue

<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { route } from 'ziggy-js';
import Chat from '@/components/Chat.vue';

const props = defineProps<{
    dynamicId: number;
    ledgerId: number;
    mutations: Array<{
        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 }>;
    }>;
    participants?: Array<{
        id: number;
        name: string;
        pivot?: { role: string };
    }>;
    isOwner: boolean;
}>();

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 isOwnerUser(userId: number): boolean {
    const participant = props.participants?.find((p) => p.id === userId);

    return participant?.pivot?.role === 'owner';
}
</script>

<template>
    <div class="mt-8">
        <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
            Mutations
        </h4>
        <ul class="mt-4 space-y-4">
            <li
                v-for="mutation in mutations"
                :key="mutation.id"
                class="overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800"
            >
                <div class="flex items-start justify-between">
                    <div>
                        <span class="font-semibold">
                            {{
                                isOwnerUser(mutation.user_id)
                                    ? 'Added by'
                                    : 'Suggested by'
                            }}
                            {{ mutation.user.name }}
                        </span>
                        <div class="mt-1 flex items-center gap-2">
                            <span
                                :class="{
                                    'text-green-500': mutation.amount > 0,
                                    'text-red-500': mutation.amount < 0,
                                }"
                                class="text-sm font-bold"
                            >
                                {{ 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="{
                                    'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400':
                                        mutation.status === 'pending',
                                    'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400':
                                        mutation.status === 'approved',
                                    'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400':
                                        mutation.status === 'rejected',
                                }"
                                class="rounded px-1.5 py-0.5 text-[10px] font-medium tracking-wider uppercase"
                            >
                                {{ mutation.status }}
                            </span>
                        </div>
                    </div>
                    <div class="text-xs text-gray-500">
                        {{ new Date(mutation.created_at).toLocaleString() }}
                    </div>
                </div>
                <p class="mt-3 text-sm text-gray-600 dark:text-gray-400">
                    {{ mutation.description }}
                </p>

                <!-- Attached Mutation Proof Media -->
                <div
                    v-if="mutation.media && mutation.media.length > 0"
                    class="mt-3 flex flex-wrap gap-2"
                >
                    <div
                        v-for="item in mutation.media"
                        :key="item.id"
                        class="max-w-[200px] overflow-hidden rounded-md border border-neutral-200 bg-black dark:border-neutral-700"
                    >
                        <img
                            v-if="item.mime_type.startsWith('image/')"
                            :src="item.url"
                            class="h-auto max-h-[150px] w-full cursor-pointer object-cover transition-opacity hover:opacity-90"
                            @click="
                                emit('open-lightbox', item.url, item.mime_type)
                            "
                        />
                        <div
                            v-else-if="item.mime_type.startsWith('video/')"
                            class="relative cursor-pointer transition-opacity hover:opacity-90"
                            @click="
                                emit('open-lightbox', item.url, item.mime_type)
                            "
                        >
                            <video
                                :src="item.url"
                                class="h-auto max-h-[150px] w-full"
                            ></video>
                            <div
                                class="absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white"
                            >
                                ▶
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Owner Approve/Reject Actions -->
                <div
                    v-if="isOwner && mutation.status === 'pending'"
                    class="mt-3 flex gap-2 border-t border-neutral-100 pt-3 dark:border-neutral-700"
                >
                    <button
                        @click="updateStatus(mutation.id, 'approved')"
                        class="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"
                    >
                        Approve
                    </button>
                    <button
                        @click="updateStatus(mutation.id, 'rejected')"
                        class="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"
                    >
                        Reject
                    </button>
                </div>

                <Chat :chat="mutation.chat" />
            </li>
        </ul>
        <div v-if="mutations.length === 0" class="mt-4 text-gray-500">
            No mutations found for this ledger.
        </div>
    </div>
</template>