splitting into components

app/Http/Controllers/MutationController.php

@@ -67,6 +67,30 @@ class MutationController extends Controller
             return $mutation;
         });
 
+        // Log to Mutation and Dynamic chats
+        $user = $request->user();
+
+        $mutationMsg = $mutation->chat->messages()->create([
+            'user_id' => $user->id,
+            'content' => $status === 'approved'
+                ? "System: Entry was created by {$user->name}."
+                : "System: Suggestion was created by {$user->name}.",
+        ]);
+        broadcast(new \App\Events\MessageSent($mutationMsg));
+
+        if ($status === 'approved') {
+            $dynamicMsg = $dynamic->chat->messages()->create([
+                'user_id' => $user->id,
+                'content' => "System: {$user->name} added entry \"{$mutation->description}\" for " . ($mutation->amount >= 0 ? '+' : '') . "{$mutation->amount} points on \"{$ledger->name}\" ledger.",
+            ]);
+        } else {
+            $dynamicMsg = $dynamic->chat->messages()->create([
+                'user_id' => $user->id,
+                'content' => "System: {$user->name} suggested \"{$mutation->description}\" for " . ($mutation->amount >= 0 ? '+' : '') . "{$mutation->amount} points on \"{$ledger->name}\" ledger.",
+            ]);
+        }
+        broadcast(new \App\Events\MessageSent($dynamicMsg));
+
         // Broadcast the real-time creation event!
         broadcast(new \App\Events\MutationCreated($mutation));
 

resources/js/app.ts

@@ -1,10 +1,10 @@
 import { createInertiaApp } from '@inertiajs/vue3';
+import { configureEcho } from '@laravel/echo-vue';
 import { initializeTheme } from '@/composables/useAppearance';
 import AppLayout from '@/layouts/AppLayout.vue';
 import AuthLayout from '@/layouts/AuthLayout.vue';
 import SettingsLayout from '@/layouts/settings/Layout.vue';
 import { initializeFlashToast } from '@/lib/flashToast';
-import { configureEcho } from '@laravel/echo-vue';
 
 configureEcho({
     broadcaster: 'reverb',

resources/js/components/AddMutationForm.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { route } from 'ziggy-js';
+
+const props = defineProps<{
+    dynamicId: number;
+    ledgerId: number;
+}>();
+
+const form = useForm({
+    amount: 0,
+    description: '',
+    media: [] as File[],
+});
+
+function handleMutationFileChange(event: Event) {
+    const files = (event.target as HTMLInputElement).files;
+
+    if (files) {
+        for (let i = 0; i < files.length; i++) {
+            form.media.push(files[i]);
+        }
+    }
+}
+
+function removeMutationFile(index: number) {
+    form.media.splice(index, 1);
+}
+
+function submit() {
+    form.post(
+        route('dynamics.ledgers.mutations.store', {
+            dynamic: props.dynamicId,
+            ledger: props.ledgerId,
+        }),
+        {
+            onSuccess: () => form.reset(),
+        },
+    );
+}
+</script>
+
+<template>
+    <div class="mt-8">
+        <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+            Add Mutation
+        </h4>
+        <form
+            @submit.prevent="submit"
+            class="mt-6 space-y-6 overflow-hidden bg-white p-6 shadow-sm sm:rounded-lg dark:bg-gray-800"
+        >
+            <div>
+                <label
+                    for="amount"
+                    class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                    >Amount</label
+                >
+                <input
+                    v-model="form.amount"
+                    id="amount"
+                    type="number"
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
+                />
+                <div v-if="form.errors.amount" class="text-sm text-red-600">
+                    {{ form.errors.amount }}
+                </div>
+            </div>
+
+            <div>
+                <label
+                    for="description"
+                    class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                    >Description</label
+                >
+                <textarea
+                    v-model="form.description"
+                    id="description"
+                    rows="4"
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
+                ></textarea>
+                <div
+                    v-if="form.errors.description"
+                    class="text-sm text-red-600"
+                >
+                    {{ form.errors.description }}
+                </div>
+            </div>
+
+            <!-- Media Uploads for Mutations -->
+            <div>
+                <label
+                    class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                    >Attach Proof Media (Photos/Videos)</label
+                >
+                <input
+                    type="file"
+                    multiple
+                    accept="image/*,video/*"
+                    @change="handleMutationFileChange"
+                    class="mt-1 block w-full text-sm text-neutral-500 file:mr-4 file:rounded-md file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-xs file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100"
+                />
+                <div
+                    v-if="form.media.length > 0"
+                    class="mt-2 flex flex-wrap gap-2"
+                >
+                    <div
+                        v-for="(file, index) in form.media"
+                        :key="index"
+                        class="relative inline-flex items-center gap-2 rounded border border-neutral-200 bg-neutral-100 p-1.5 pr-8 text-xs dark:border-neutral-700 dark:bg-neutral-800"
+                    >
+                        <span class="max-w-[150px] truncate">{{
+                            file.name
+                        }}</span>
+                        <button
+                            type="button"
+                            @click="removeMutationFile(index)"
+                            class="absolute top-1.5 right-1.5 cursor-pointer text-[10px] text-neutral-400 hover:text-red-500"
+                        >
+                            ✕
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-4">
+                <button
+                    type="submit"
+                    :disabled="form.processing"
+                    class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300"
+                >
+                    Add Mutation
+                </button>
+            </div>
+        </form>
+    </div>
+</template>

resources/js/components/Chat.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import { useEcho, echoIsConfigured, configureEcho } from '@laravel/echo-vue';
-import { route } from 'ziggy-js';
 import { Paperclip } from '@lucide/vue';
+import { ref } from 'vue';
+import { route } from 'ziggy-js';
 
 const props = defineProps<{
     chat: {
@@ -52,6 +52,7 @@ useEcho(`chats.${props.chat.id}`, 'MessageSent', (e: any) => {
 
 function handleFileChange(event: Event) {
     const files = (event.target as HTMLInputElement).files;
+
     if (files) {
         for (let i = 0; i < files.length; i++) {
             form.media.push(files[i]);
@@ -67,6 +68,7 @@ function submit() {
     form.post(route('chats.messages.store', props.chat.id), {
         onSuccess: () => {
             form.reset();
+
             if (fileInput.value) {
                 fileInput.value.value = '';
             }

resources/js/components/CreateLedgerForm.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { route } from 'ziggy-js';
+
+const props = defineProps<{
+    dynamicId: number;
+}>();
+
+const form = useForm({
+    name: '',
+    rules: '',
+    media: [] as File[],
+});
+
+function handleLedgerFileChange(event: Event) {
+    const files = (event.target as HTMLInputElement).files;
+
+    if (files) {
+        for (let i = 0; i < files.length; i++) {
+            form.media.push(files[i]);
+        }
+    }
+}
+
+function removeLedgerFile(index: number) {
+    form.media.splice(index, 1);
+}
+
+function submit() {
+    form.post(route('dynamics.ledgers.store', props.dynamicId), {
+        onSuccess: () => form.reset(),
+    });
+}
+</script>
+
+<template>
+    <div class="mt-8">
+        <div
+            class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800"
+        >
+            <div class="p-6 text-gray-900 dark:text-gray-100">
+                <h3 class="text-lg font-medium">Create a New Ledger</h3>
+
+                <form @submit.prevent="submit" class="mt-6 space-y-6">
+                    <div>
+                        <label
+                            for="name"
+                            class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                            >Name</label
+                        >
+                        <input
+                            v-model="form.name"
+                            id="name"
+                            type="text"
+                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
+                        />
+                        <div
+                            v-if="form.errors.name"
+                            class="text-sm text-red-600"
+                        >
+                            {{ form.errors.name }}
+                        </div>
+                    </div>
+
+                    <div>
+                        <label
+                            for="rules"
+                            class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                            >Rules</label
+                        >
+                        <textarea
+                            v-model="form.rules"
+                            id="rules"
+                            rows="4"
+                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
+                        ></textarea>
+                        <div
+                            v-if="form.errors.rules"
+                            class="text-sm text-red-600"
+                        >
+                            {{ form.errors.rules }}
+                        </div>
+                    </div>
+
+                    <!-- Media Uploads for Ledgers -->
+                    <div>
+                        <label
+                            class="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                            >Attach Cover/Rules Media</label
+                        >
+                        <input
+                            type="file"
+                            multiple
+                            accept="image/*,video/*"
+                            @change="handleLedgerFileChange"
+                            class="mt-1 block w-full text-sm text-neutral-500 file:mr-4 file:rounded-md file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-xs file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100"
+                        />
+                        <div
+                            v-if="form.media.length > 0"
+                            class="mt-2 flex flex-wrap gap-2"
+                        >
+                            <div
+                                v-for="(file, index) in form.media"
+                                :key="index"
+                                class="relative inline-flex items-center gap-2 rounded border border-neutral-200 bg-neutral-100 p-1.5 pr-8 text-xs dark:border-neutral-700 dark:bg-neutral-800"
+                            >
+                                <span class="max-w-[150px] truncate">{{
+                                    file.name
+                                }}</span>
+                                <button
+                                    type="button"
+                                    @click="removeLedgerFile(index)"
+                                    class="absolute top-1.5 right-1.5 cursor-pointer text-[10px] text-neutral-400 hover:text-red-500"
+                                >
+                                    ✕
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex items-center gap-4">
+                        <button
+                            type="submit"
+                            :disabled="form.processing"
+                            class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300"
+                        >
+                            Create Ledger
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</template>

resources/js/components/LedgerList.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { route } from 'ziggy-js';
+
+defineProps<{
+    dynamicId: number;
+    ledgers: Array<{
+        id: number;
+        name: string;
+        score: number;
+        media?: Array<{ id: number; url: string; mime_type: string }>;
+    }>;
+}>();
+</script>
+
+<template>
+    <div class="mt-8">
+        <div class="mb-6 flex items-center justify-between">
+            <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+                Ledgers
+            </h4>
+        </div>
+        <ul class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <li
+                v-for="ledger in ledgers"
+                :key="ledger.id"
+                class="border-b border-gray-200 bg-white p-6 dark:border-gray-600 dark:bg-gray-700"
+            >
+                <Link
+                    :href="
+                        route('dynamics.ledgers.show', {
+                            dynamic: dynamicId,
+                            ledger: ledger.id,
+                        })
+                    "
+                >
+                    <h5 class="text-lg font-semibold">
+                        {{ ledger.name }}
+                    </h5>
+                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                        Score: {{ ledger.score }}
+                    </p>
+
+                    <!-- Ledger Media Thumbnails -->
+                    <div
+                        v-if="ledger.media && ledger.media.length > 0"
+                        class="mt-2 flex flex-wrap gap-1"
+                    >
+                        <div
+                            v-for="item in ledger.media"
+                            :key="item.id"
+                            class="relative size-8 overflow-hidden rounded border border-gray-300 bg-black dark:border-gray-600"
+                        >
+                            <img
+                                v-if="item.mime_type.startsWith('image/')"
+                                :src="item.url"
+                                class="size-full object-cover"
+                            />
+                            <video
+                                v-else-if="item.mime_type.startsWith('video/')"
+                                :src="item.url"
+                                class="size-full object-cover"
+                            />
+                        </div>
+                    </div>
+                </Link>
+            </li>
+        </ul>
+        <div v-if="ledgers.length === 0" class="mt-4 text-gray-500">
+            No ledgers found for this dynamic.
+        </div>
+    </div>
+</template>

resources/js/components/MutationList.vue

@@ -0,0 +1,170 @@
+<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>

resources/js/components/ParticipantsList.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+defineProps<{
+    participants: Array<{
+        id: number;
+        name: string;
+    }>;
+}>();
+</script>
+
+<template>
+    <div class="mt-8">
+        <h4 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+            Participants
+        </h4>
+        <ul class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <li
+                v-for="participant in participants"
+                :key="participant.id"
+                class="overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800"
+            >
+                {{ participant.name }}
+            </li>
+        </ul>
+    </div>
+</template>

resources/js/pages/Dynamics/Show.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
-import Chat from '@/components/Chat.vue';
-import { Head, Link, useForm } from '@inertiajs/vue3';
+import { Head } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
+import Chat from '@/components/Chat.vue';
+import CreateLedgerForm from '@/components/CreateLedgerForm.vue';
+import LedgerList from '@/components/LedgerList.vue';
+import ParticipantsList from '@/components/ParticipantsList.vue';
 
 const props = defineProps<{
     dynamic: {
@@ -29,31 +32,6 @@ const breadcrumbs = [
         href: route('dynamics.show', props.dynamic.id),
     },
 ];
-
-const form = useForm({
-    name: '',
-    rules: '',
-    media: [] as File[],
-});
-
-function handleLedgerFileChange(event: Event) {
-    const files = (event.target as HTMLInputElement).files;
-    if (files) {
-        for (let i = 0; i < files.length; i++) {
-            form.media.push(files[i]);
-        }
-    }
-}
-
-function removeLedgerFile(index: number) {
-    form.media.splice(index, 1);
-}
-
-function submit() {
-    form.post(route('dynamics.ledgers.store', props.dynamic.id), {
-        onSuccess: () => form.reset(),
-    });
-}
 </script>
 
 <template>
@@ -72,194 +50,17 @@ function submit() {
                 </div>
             </div>
 
+            <!-- Dynamic Chat -->
             <Chat :chat="dynamic.chat" />
 
-            <div class="mt-8">
-                <h4
-                    class="text-lg font-medium text-gray-900 dark:text-gray-100"
-                >
-                    Participants
-                </h4>
-                <ul
-                    class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"
-                >
-                    <li
-                        v-for="participant in dynamic.participants"
-                        :key="participant.id"
-                        class="overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800"
-                    >
-                        {{ participant.name }}
-                    </li>
-                </ul>
-            </div>
+            <!-- Participants Component -->
+            <ParticipantsList :participants="dynamic.participants" />
 
-            <div class="mt-8">
-                <div class="mb-6 flex items-center justify-between">
-                    <h4
-                        class="text-lg font-medium text-gray-900 dark:text-gray-100"
-                    >
-                        Ledgers
-                    </h4>
-                </div>
-                <ul
-                    class="mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"
-                >
-                    <li
-                        v-for="ledger in dynamic.ledgers"
-                        :key="ledger.id"
-                        class="border-b border-gray-200 bg-white p-6 dark:border-gray-600 dark:bg-gray-700"
-                    >
-                        <Link
-                            :href="
-                                route('dynamics.ledgers.show', {
-                                    dynamic: dynamic.id,
-                                    ledger: ledger.id,
-                                })
-                            "
-                        >
-                            <h5 class="text-lg font-semibold">
-                                {{ ledger.name }}
-                            </h5>
-                            <p
-                                class="mt-2 text-sm text-gray-600 dark:text-gray-400"
-                            >
-                                Score: {{ ledger.score }}
-                            </p>
+            <!-- Ledgers List Component -->
+            <LedgerList :dynamic-id="dynamic.id" :ledgers="dynamic.ledgers" />
 
-                            <!-- Ledger Media Thumbnails -->
-                            <div
-                                v-if="ledger.media && ledger.media.length > 0"
-                                class="mt-2 flex flex-wrap gap-1"
-                            >
-                                <div
-                                    v-for="item in ledger.media"
-                                    :key="item.id"
-                                    class="relative size-8 overflow-hidden rounded border border-gray-300 bg-black dark:border-gray-600"
-                                >
-                                    <img
-                                        v-if="
-                                            item.mime_type.startsWith('image/')
-                                        "
-                                        :src="item.url"
-                                        class="size-full object-cover"
-                                    />
-                                    <video
-                                        v-else-if="
-                                            item.mime_type.startsWith('video/')
-                                        "
-                                        :src="item.url"
-                                        class="size-full object-cover"
-                                    />
-                                </div>
-                            </div>
-                        </Link>
-                    </li>
-                </ul>
-                <div
-                    v-if="dynamic.ledgers.length === 0"
-                    class="mt-4 text-gray-500"
-                >
-                    No ledgers found for this dynamic.
-                </div>
-            </div>
-
-            <div class="mt-8">
-                <div
-                    class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800"
-                >
-                    <div class="p-6 text-gray-900 dark:text-gray-100">
-                        <h3 class="text-lg font-medium">Create a New Ledger</h3>
-
-                        <form @submit.prevent="submit" class="mt-6 space-y-6">
-                            <div>
-                                <label
-                                    for="name"
-                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-                                    >Name</label
-                                >
-                                <input
-                                    v-model="form.name"
-                                    id="name"
-                                    type="text"
-                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
-                                />
-                                <div
-                                    v-if="form.errors.name"
-                                    class="text-sm text-red-600"
-                                >
-                                    {{ form.errors.name }}
-                                </div>
-                            </div>
-
-                            <div>
-                                <label
-                                    for="rules"
-                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-                                    >Rules</label
-                                >
-                                <textarea
-                                    v-model="form.rules"
-                                    id="rules"
-                                    rows="4"
-                                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
-                                ></textarea>
-                                <div
-                                    v-if="form.errors.rules"
-                                    class="text-sm text-red-600"
-                                >
-                                    {{ form.errors.rules }}
-                                </div>
-                            </div>
-
-                            <!-- Media Uploads for Ledgers -->
-                            <div>
-                                <label
-                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-                                    >Attach Cover/Rules Media</label
-                                >
-                                <input
-                                    type="file"
-                                    multiple
-                                    accept="image/*,video/*"
-                                    @change="handleLedgerFileChange"
-                                    class="mt-1 block w-full text-sm text-neutral-500 file:mr-4 file:rounded-md file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-xs file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100"
-                                />
-                                <div
-                                    v-if="form.media.length > 0"
-                                    class="mt-2 flex flex-wrap gap-2"
-                                >
-                                    <div
-                                        v-for="(file, index) in form.media"
-                                        :key="index"
-                                        class="relative inline-flex items-center gap-2 rounded border border-neutral-200 bg-neutral-100 p-1.5 pr-8 text-xs dark:border-neutral-700 dark:bg-neutral-800"
-                                    >
-                                        <span class="max-w-[150px] truncate">{{
-                                            file.name
-                                        }}</span>
-                                        <button
-                                            type="button"
-                                            @click="removeLedgerFile(index)"
-                                            class="absolute top-1.5 right-1.5 cursor-pointer text-[10px] text-neutral-400 hover:text-red-500"
-                                        >
-                                            ✕
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="flex items-center gap-4">
-                                <button
-                                    type="submit"
-                                    :disabled="form.processing"
-                                    class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300"
-                                >
-                                    Create Ledger
-                                </button>
-                            </div>
-                        </form>
-                    </div>
-                </div>
-            </div>
+            <!-- Create Ledger Form Component -->
+            <CreateLedgerForm :dynamic-id="dynamic.id" />
         </div>
     </div>
 </template>

resources/js/pages/Ledgers/Show.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-import Chat from '@/components/Chat.vue';
-import { Head, useForm } from '@inertiajs/vue3';
-import { route } from 'ziggy-js';
+import { Head } from '@inertiajs/vue3';
 import { useEcho } from '@laravel/echo-vue';
+import { ref } from 'vue';
+import { route } from 'ziggy-js';
+import AddMutationForm from '@/components/AddMutationForm.vue';
+import MutationList from '@/components/MutationList.vue';
 
 const props = defineProps<{
     dynamic: {
@@ -55,37 +56,6 @@ const breadcrumbs = [
     },
 ];
 
-const form = useForm({
-    amount: 0,
-    description: '',
-    media: [] as File[],
-});
-
-function handleMutationFileChange(event: Event) {
-    const files = (event.target as HTMLInputElement).files;
-    if (files) {
-        for (let i = 0; i < files.length; i++) {
-            form.media.push(files[i]);
-        }
-    }
-}
-
-function removeMutationFile(index: number) {
-    form.media.splice(index, 1);
-}
-
-function submit() {
-    form.post(
-        route('dynamics.ledgers.mutations.store', {
-            dynamic: props.dynamic.id,
-            ledger: props.ledger.id,
-        }),
-        {
-            onSuccess: () => form.reset(),
-        },
-    );
-}
-
 // Lightbox Modal state
 const activeLightboxUrl = ref<string | null>(null);
 const activeLightboxType = ref<'image' | 'video' | null>(null);
@@ -121,12 +91,17 @@ useEcho(`chats.${props.dynamic.chat.id}`, 'MutationCreated', (e: any) => {
         if (!props.ledger.mutations.some((m) => m.id === e.mutation.id)) {
             props.ledger.mutations.unshift(e.mutation);
         }
+
         // Auto-update score if already approved (e.g. submitted by owner)
         if (e.mutation.status === 'approved') {
             props.ledger.score += e.mutation.amount;
         }
+
+        const isAutoApproved =
+            e.mutation.status === 'approved' && isOwnerUser(e.mutation.user_id);
+        const statusPrefix = isAutoApproved ? '' : ` ${e.mutation.status}`;
         showToast(
-            `New ${e.mutation.status} ledger entry added by ${e.mutation.user.name}: "${e.mutation.description}"`,
+            `New${statusPrefix} ledger entry added by ${e.mutation.user.name}: "${e.mutation.description}"`,
         );
     }
 });
@@ -136,6 +111,7 @@ useEcho(`chats.${props.dynamic.chat.id}`, 'MutationUpdated', (e: any) => {
         const index = props.ledger.mutations.findIndex(
             (m) => m.id === e.mutation.id,
         );
+
         if (index !== -1) {
             const oldStatus = props.ledger.mutations[index].status;
             const newStatus = e.mutation.status;
@@ -157,21 +133,12 @@ useEcho(`chats.${props.dynamic.chat.id}`, 'MutationUpdated', (e: any) => {
     }
 });
 
-function updateStatus(mutationId: number, status: 'approved' | 'rejected') {
-    useForm({ status }).put(
-        route('dynamics.ledgers.mutations.update', {
-            dynamic: props.dynamic.id,
-            ledger: props.ledger.id,
-            mutation: mutationId,
-        }),
-    );
-}
-
 // Check if user is an owner in the dynamic
 function isOwnerUser(userId: number): boolean {
     const participant = props.dynamic.participants?.find(
         (p) => p.id === userId,
     );
+
     return participant?.pivot?.role === 'owner';
 }
 </script>
@@ -248,232 +215,18 @@ function isOwnerUser(userId: number): boolean {
                 </div>
             </div>
 
-            <div class="mt-8">
-                <h4
-                    class="text-lg font-medium text-gray-900 dark:text-gray-100"
-                >
-                    Add Mutation
-                </h4>
-                <form
-                    @submit.prevent="submit"
-                    class="mt-6 space-y-6 overflow-hidden bg-white p-6 shadow-sm sm:rounded-lg dark:bg-gray-800"
-                >
-                    <div>
-                        <label
-                            for="amount"
-                            class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-                            >Amount</label
-                        >
-                        <input
-                            v-model="form.amount"
-                            id="amount"
-                            type="number"
-                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
-                        />
-                        <div
-                            v-if="form.errors.amount"
-                            class="text-sm text-red-600"
-                        >
-                            {{ form.errors.amount }}
-                        </div>
-                    </div>
+            <!-- Add Mutation Form Component -->
+            <AddMutationForm :dynamic-id="dynamic.id" :ledger-id="ledger.id" />
 
-                    <div>
-                        <label
-                            for="description"
-                            class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-                            >Description</label
-                        >
-                        <textarea
-                            v-model="form.description"
-                            id="description"
-                            rows="4"
-                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:focus:border-indigo-600 dark:focus:ring-indigo-600"
-                        ></textarea>
-                        <div
-                            v-if="form.errors.description"
-                            class="text-sm text-red-600"
-                        >
-                            {{ form.errors.description }}
-                        </div>
-                    </div>
-
-                    <!-- Media Uploads for Mutations -->
-                    <div>
-                        <label
-                            class="block text-sm font-medium text-gray-700 dark:text-gray-300"
-                            >Attach Proof Media (Photos/Videos)</label
-                        >
-                        <input
-                            type="file"
-                            multiple
-                            accept="image/*,video/*"
-                            @change="handleMutationFileChange"
-                            class="mt-1 block w-full text-sm text-neutral-500 file:mr-4 file:rounded-md file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-xs file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100"
-                        />
-                        <div
-                            v-if="form.media.length > 0"
-                            class="mt-2 flex flex-wrap gap-2"
-                        >
-                            <div
-                                v-for="(file, index) in form.media"
-                                :key="index"
-                                class="relative inline-flex items-center gap-2 rounded border border-neutral-200 bg-neutral-100 p-1.5 pr-8 text-xs dark:border-neutral-700 dark:bg-neutral-800"
-                            >
-                                <span class="max-w-[150px] truncate">{{
-                                    file.name
-                                }}</span>
-                                <button
-                                    type="button"
-                                    @click="removeMutationFile(index)"
-                                    class="absolute top-1.5 right-1.5 cursor-pointer text-[10px] text-neutral-400 hover:text-red-500"
-                                >
-                                    ✕
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="flex items-center gap-4">
-                        <button
-                            type="submit"
-                            :disabled="form.processing"
-                            class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none active:bg-gray-900 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-white dark:focus:bg-white dark:focus:ring-offset-gray-800 dark:active:bg-gray-300"
-                        >
-                            Add Mutation
-                        </button>
-                    </div>
-                </form>
-            </div>
-
-            <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 ledger.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">{{
-                                    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="
-                                        openLightbox(item.url, item.mime_type)
-                                    "
-                                />
-                                <div
-                                    v-else-if="
-                                        item.mime_type.startsWith('video/')
-                                    "
-                                    class="relative cursor-pointer transition-opacity hover:opacity-90"
-                                    @click="
-                                        openLightbox(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="ledger.mutations.length === 0"
-                    class="mt-4 text-gray-500"
-                >
-                    No mutations found for this ledger.
-                </div>
-            </div>
+            <!-- Mutation List Component -->
+            <MutationList
+                :dynamic-id="dynamic.id"
+                :ledger-id="ledger.id"
+                :mutations="ledger.mutations"
+                :participants="dynamic.participants"
+                :is-owner="isOwner"
+                @open-lightbox="openLightbox"
+            />
         </div>
     </div>
 

tests/Feature/MutationTest.php

@@ -0,0 +1,117 @@
+<?php
+
+use App\Models\User;
+use App\Models\Dynamic;
+use App\Models\Ledger;
+use App\Models\Mutation;
+
+test('owner can create a mutation which is automatically approved and does not say Approved', function () {
+    $owner = User::factory()->create();
+    $dynamic = Dynamic::factory()->create();
+    $dynamic->participants()->attach($owner->id, ['role' => 'owner']);
+    $ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id, 'score' => 100]);
+
+    $this->actingAs($owner);
+
+    $response = $this->post(route('dynamics.ledgers.mutations.store', [$dynamic, $ledger]), [
+        'amount' => 15,
+        'description' => 'Direct point reward',
+    ]);
+
+    $response->assertRedirect(route('dynamics.ledgers.show', [$dynamic, $ledger]));
+
+    $mutation = Mutation::firstWhere('description', 'Direct point reward');
+
+    expect($mutation)->not->toBeNull();
+    expect($mutation->status)->toBe('approved');
+
+    // Score should be updated immediately
+    $ledger->refresh();
+    expect($ledger->score)->toBe(115);
+
+    // Verify chat messages (should NOT say "approved" or "Approved")
+    $mutationChatMessages = $mutation->chat->messages;
+    expect($mutationChatMessages)->toHaveCount(1);
+    expect($mutationChatMessages->first()->content)->toBe("System: Entry was created by {$owner->name}.");
+
+    $dynamicChatMessages = $dynamic->chat->messages;
+    expect($dynamicChatMessages)->toHaveCount(1);
+    expect($dynamicChatMessages->first()->content)->toBe("System: {$owner->name} added entry \"Direct point reward\" for +15 points on \"{$ledger->name}\" ledger.");
+});
+
+test('non-owner participant creates a suggestion which defaults to pending and says suggested', function () {
+    $owner = User::factory()->create();
+    $participant = User::factory()->create();
+    $dynamic = Dynamic::factory()->create();
+    $dynamic->participants()->attach($owner->id, ['role' => 'owner']);
+    $dynamic->participants()->attach($participant->id, ['role' => 'participant']);
+    $ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id, 'score' => 100]);
+
+    $this->actingAs($participant);
+
+    $response = $this->post(route('dynamics.ledgers.mutations.store', [$dynamic, $ledger]), [
+        'amount' => 10,
+        'description' => 'Suggested point reward',
+    ]);
+
+    $response->assertRedirect(route('dynamics.ledgers.show', [$dynamic, $ledger]));
+
+    $mutation = Mutation::firstWhere('description', 'Suggested point reward');
+
+    expect($mutation)->not->toBeNull();
+    expect($mutation->status)->toBe('pending');
+
+    // Score should NOT be updated immediately
+    $ledger->refresh();
+    expect($ledger->score)->toBe(100);
+
+    // Verify chat messages
+    $mutationChatMessages = $mutation->chat->messages;
+    expect($mutationChatMessages)->toHaveCount(1);
+    expect($mutationChatMessages->first()->content)->toBe("System: Suggestion was created by {$participant->name}.");
+
+    $dynamicChatMessages = $dynamic->chat->messages;
+    expect($dynamicChatMessages)->toHaveCount(1);
+    expect($dynamicChatMessages->first()->content)->toBe("System: {$participant->name} suggested \"Suggested point reward\" for +10 points on \"{$ledger->name}\" ledger.");
+});
+
+test('owner can approve a pending suggestion and it is updated and logged', function () {
+    $owner = User::factory()->create();
+    $participant = User::factory()->create();
+    $dynamic = Dynamic::factory()->create();
+    $dynamic->participants()->attach($owner->id, ['role' => 'owner']);
+    $dynamic->participants()->attach($participant->id, ['role' => 'participant']);
+    $ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id, 'score' => 100]);
+
+    // Create a pending mutation for the participant
+    $mutation = Mutation::factory()->create([
+        'ledger_id' => $ledger->id,
+        'user_id' => $participant->id,
+        'amount' => 20,
+        'description' => 'Polished dungeon floors',
+        'status' => 'pending',
+    ]);
+
+    $this->actingAs($owner);
+
+    $response = $this->put(route('dynamics.ledgers.mutations.update', [$dynamic, $ledger, $mutation]), [
+        'status' => 'approved',
+    ]);
+
+    $response->assertRedirect();
+
+    $mutation->refresh();
+    expect($mutation->status)->toBe('approved');
+
+    $ledger->refresh();
+    expect($ledger->score)->toBe(120);
+
+    // Verify system logs (should have the manual approval log now)
+    $mutationChatMessages = $mutation->chat->messages;
+    // Note: one from boot created (empty or via seeder, but in our factory it starts with 0 messages if not manually logged,
+    // actually our model booted hook creates the chat but doesn't log on boot, the update method creates 1 message)
+    expect($mutationChatMessages->last()->content)->toBe("System: Suggestion was APPROVED by {$owner->name}.");
+
+    $dynamicChatMessages = $dynamic->chat->messages;
+    expect($dynamicChatMessages->last()->content)->toBe("System: {$owner->name} APPROVED the suggestion \"Polished dungeon floors\" for +20 points on \"{$ledger->name}\" ledger.");
+});