app/Http/Controllers/PredefinedMutationController.php

@@ -3,7 +3,6 @@
 namespace App\Http\Controllers;
 
 use App\Models\Dynamic;
-use App\Models\Ledger;
 use App\Models\PredefinedMutation;
 use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
 use Illuminate\Http\Request;
@@ -16,21 +15,20 @@ class PredefinedMutationController extends Controller
     /**
      * Display a listing of the resource.
      */
-    public function index(Dynamic $dynamic, Ledger $ledger)
+    public function index(Dynamic $dynamic)
     {
         $this->authorize('update', $dynamic);
 
-        return Inertia::render('Ledgers/PredefinedMutations/Index', [
+        return Inertia::render('Dynamics/PredefinedMutations/Index', [
             'dynamic' => $dynamic,
-            'ledger' => $ledger,
+            'predefined_mutations' => $dynamic->predefinedMutations()->latest()->get(),
-            'predefined_mutations' => $ledger->predefinedMutations()->latest()->get(),
         ]);
     }
 
     /**
      * Store a newly created resource in storage.
      */
-    public function store(Request $request, Dynamic $dynamic, Ledger $ledger)
+    public function store(Request $request, Dynamic $dynamic)
     {
         $this->authorize('update', $dynamic);
 
@@ -38,23 +36,23 @@ class PredefinedMutationController extends Controller
             'name' => ['required', 'string', 'max:255'],
             'description' => ['nullable', 'string'],
             'amount' => ['required', 'integer'],
+            'type' => ['required', 'string', 'in:reward,penalty'],
         ]);
 
-        $ledger->predefinedMutations()->create($request->all());
+        $dynamic->predefinedMutations()->create($request->all());
 
-        return redirect()->route('dynamics.ledgers.predefined-mutations.index', [$dynamic, $ledger]);
+        return redirect()->route('dynamics.predefined-mutations.index', $dynamic);
     }
 
     /**
      * Show the form for editing the specified resource.
      */
-    public function edit(Dynamic $dynamic, Ledger $ledger, PredefinedMutation $predefinedMutation)
+    public function edit(Dynamic $dynamic, PredefinedMutation $predefinedMutation)
     {
         $this->authorize('update', $dynamic);
 
-        return Inertia::render('Ledgers/PredefinedMutations/Edit', [
+        return Inertia::render('Dynamics/PredefinedMutations/Edit', [
             'dynamic' => $dynamic,
-            'ledger' => $ledger,
             'predefined_mutation' => $predefinedMutation,
         ]);
     }
@@ -62,7 +60,7 @@ class PredefinedMutationController extends Controller
     /**
      * Update the specified resource in storage.
      */
-    public function update(Request $request, Dynamic $dynamic, Ledger $ledger, PredefinedMutation $predefinedMutation)
+    public function update(Request $request, Dynamic $dynamic, PredefinedMutation $predefinedMutation)
     {
         $this->authorize('update', $dynamic);
 
@@ -70,22 +68,23 @@ class PredefinedMutationController extends Controller
             'name' => ['required', 'string', 'max:255'],
             'description' => ['nullable', 'string'],
             'amount' => ['required', 'integer'],
+            'type' => ['required', 'string', 'in:reward,penalty'],
         ]);
 
         $predefinedMutation->update($request->all());
 
-        return redirect()->route('dynamics.ledgers.predefined-mutations.index', [$dynamic, $ledger]);
+        return redirect()->route('dynamics.predefined-mutations.index', $dynamic);
     }
 
     /**
      * Remove the specified resource from storage.
      */
-    public function destroy(Dynamic $dynamic, Ledger $ledger, PredefinedMutation $predefinedMutation)
+    public function destroy(Dynamic $dynamic, PredefinedMutation $predefinedMutation)
     {
         $this->authorize('update', $dynamic);
 
         $predefinedMutation->delete();
 
-        return redirect()->route('dynamics.ledgers.predefined-mutations.index', [$dynamic, $ledger]);
+        return redirect()->route('dynamics.predefined-mutations.index', $dynamic);
     }
 }

app/Http/Resources/MutationResource.php

@@ -13,13 +13,6 @@ class MutationResource extends BaseResource
      */
     public function toArray(Request $request): array
     {
-        $data = parent::toArray($request);
+        return parent::toArray($request);
-
-        $data['can'] = [
-            'update' => $request->user()?->can('update', $this->resource) ?? false,
-            'void' => $request->user()?->can('void', $this->resource) ?? false,
-        ];
-
-        return $data;
     }
 }

app/Models/PredefinedMutation.php

@@ -12,15 +12,16 @@ class PredefinedMutation extends Model
     use HasFactory;
 
     protected $fillable = [
-        'ledger_id',
+        'dynamic_id',
         'name',
         'description',
         'amount',
+        'type',
     ];
 
-    public function ledger(): BelongsTo
+    public function dynamic(): BelongsTo
     {
-        return $this->belongsTo(Ledger::class);
+        return $this->belongsTo(Dynamic::class);
     }
 
     protected static function booted(): void

app/Policies/MutationPolicy.php

@@ -24,9 +24,8 @@ class MutationPolicy
     public function update(User $user, Mutation $mutation): bool
     {
         $dynamic = $mutation->ledger->dynamic;
-        $isOwner = $dynamic->participants()->where('user_id', $user->id)->where('role', 'owner')->exists();
 
-        return $isOwner && $mutation->status === 'pending';
+        return $dynamic->participants()->where('user_id', $user->id)->where('role', 'owner')->exists();
     }
 
     /**
@@ -35,8 +34,7 @@ class MutationPolicy
     public function void(User $user, Mutation $mutation): bool
     {
         $dynamic = $mutation->ledger->dynamic;
-        $isOwner = $dynamic->participants()->where('user_id', $user->id)->where('role', 'owner')->exists();
 
-        return $isOwner && $mutation->status !== 'voided';
+        return $dynamic->participants()->where('user_id', $user->id)->where('role', 'owner')->exists();
     }
 }

database/migrations/2026_06_16_225928_create_predefined_mutations_table.php

@@ -13,10 +13,11 @@ return new class extends Migration
     {
         Schema::create('predefined_mutations', function (Blueprint $table) {
             $table->id();
-            $table->foreignId('ledger_id')->constrained()->cascadeOnDelete();
+            $table->foreignId('dynamic_id')->constrained()->cascadeOnDelete();
             $table->string('name');
             $table->text('description')->nullable();
             $table->integer('amount');
+            $table->string('type')->default('reward');
             $table->timestamps();
         });
     }

resources/js/components/AddMutationForm.vue

@@ -3,8 +3,8 @@ import { useForm } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
 
 const props = defineProps<{
-    dynamicId: string;
+    dynamicId: number;
-    ledgerId: string;
+    ledgerId: number;
 }>();
 
 const form = useForm({

resources/js/components/Chat.vue

@@ -33,23 +33,18 @@ const props = withDefaults(
             } | null;
         }>;
         dynamicId: string;
-        initialMessages?: {
+        initialMessages: {
             data: Array<any>;
             next_page_url: string | null;
-        } | null;
+        };
     }>(),
     {
         participants: () => [],
-        initialMessages: null,
     }
 );
 
-const messages = ref(
+const messages = ref(props.initialMessages.data.reverse());
-    props.initialMessages
+const nextPageUrl = ref(props.initialMessages.next_page_url);
-        ? props.initialMessages.data.slice().reverse()
-        : (props.chat.messages || []).slice()
-);
-const nextPageUrl = ref(props.initialMessages?.next_page_url || null);
 
 function loadMoreMessages() {
     if (!nextPageUrl.value) {

resources/js/components/MutationList.vue

@@ -4,8 +4,8 @@ import { route } from 'ziggy-js';
 import Chat from '@/components/Chat.vue';
 
 const props = defineProps<{
-    dynamicId: string;
+    dynamicId: number;
-    ledgerId: string;
+    ledgerId: number;
     ledgerAlignment?: string;
     mutations: Array<{
         id: number;
@@ -17,16 +17,13 @@ const props = defineProps<{
         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 };
     }>;
+    isOwner: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -170,25 +167,25 @@ function getAmountClass(amount: number): string {
 
                 <!-- Owner Approve/Reject Actions -->
                 <div
-                    v-if="mutation.can.update || mutation.can.void"
+                    v-if="isOwner && (mutation.status === 'pending' || mutation.status === 'approved')"
                     class="c-mutation-list__actions"
                 >
                     <button
-                        v-if="mutation.can.update"
+                        v-if="mutation.status === 'pending'"
                         @click="updateStatus(mutation.id, 'approved')"
                         class="c-mutation-list__approve-btn"
                     >
                         Approve
                     </button>
                     <button
-                        v-if="mutation.can.update"
+                        v-if="mutation.status === 'pending'"
                         @click="updateStatus(mutation.id, 'rejected')"
                         class="c-mutation-list__reject-btn"
                     >
                         Reject
                     </button>
                     <button
-                        v-if="mutation.can.void"
+                        v-if="mutation.status !== 'voided'"
                         @click="voidMutation(mutation.id)"
                         class="c-mutation-list__void-btn"
                     >

resources/js/layouts/AppLayout.vue

@@ -2,22 +2,16 @@
 import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
 import type { BreadcrumbItem } from '@/types';
 import { usePushNotifications } from '@/composables/usePushNotifications';
-import { computed } from 'vue';
-import { usePage } from '@inertiajs/vue3';
 
-const props = defineProps<{
+const { breadcrumbs = [] } = defineProps<{
     breadcrumbs?: BreadcrumbItem[];
 }>();
 
-const resolvedBreadcrumbs = computed(() => {
-    return props.breadcrumbs || (usePage().props.breadcrumbs as BreadcrumbItem[]) || [];
-});
-
 const { isSubscribed, subscribe, unsubscribe } = usePushNotifications();
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="resolvedBreadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs">
         <slot />
         <div class="fixed bottom-4 right-4">
             <button

resources/js/pages/Dynamics/Create.vue

@@ -2,26 +2,22 @@
 import { Head, useForm } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
 
-defineOptions({
-    layout: {
-        breadcrumbs: [
-            {
-                title: 'Dynamics',
-                href: route('dynamics.index'),
-            },
-            {
-                title: 'Create',
-                href: route('dynamics.create'),
-            },
-        ],
-    },
-});
-
 const form = useForm({
     name: '',
     rules: '',
 });
 
+const breadcrumbs = [
+    {
+        name: 'Dynamics',
+        href: route('dynamics.index'),
+    },
+    {
+        name: 'Create',
+        href: route('dynamics.create'),
+    },
+];
+
 function submit() {
     form.post(route('dynamics.store'));
 }

resources/js/pages/Dynamics/Index.vue

@@ -2,17 +2,6 @@
 import { Head, Link } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
 
-defineOptions({
-    layout: {
-        breadcrumbs: [
-            {
-                title: 'Dynamics',
-                href: route('dynamics.index'),
-            },
-        ],
-    },
-});
-
 defineProps<{
     dynamics: Array<{
         id: string;
@@ -20,6 +9,13 @@ defineProps<{
         rules: string;
     }>;
 }>();
+
+const breadcrumbs = [
+    {
+        name: 'Dynamics',
+        href: route('dynamics.index'),
+    },
+];
 </script>
 
 <template>

resources/js/pages/Dynamics/Invite.vue

@@ -1,25 +1,7 @@
 <script setup lang="ts">
 import { Head, useForm } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
-
+import AppLayout from '@/layouts/AppLayout.vue';
-defineOptions({
-    layout: (props: any) => ({
-        breadcrumbs: [
-            {
-                title: 'Dynamics',
-                href: route('dynamics.index'),
-            },
-            {
-                title: props.dynamic.name,
-                href: route('dynamics.show', props.dynamic.id),
-            },
-            {
-                title: 'Invite User',
-                href: route('dynamics.invitations.create', props.dynamic.id),
-            },
-        ],
-    }),
-});
 
 const props = defineProps<{
     dynamic: {
@@ -33,6 +15,21 @@ const form = useForm({
     role: 'participant',
 });
 
+const breadcrumbs = [
+    {
+        name: 'Dynamics',
+        href: route('dynamics.index'),
+    },
+    {
+        name: props.dynamic.name,
+        href: route('dynamics.show', props.dynamic.id),
+    },
+    {
+        name: 'Invite User',
+        href: route('dynamics.invitations.create', props.dynamic.id),
+    },
+];
+
 function submit() {
     form.post(route('dynamics.invitations.store', props.dynamic.id), {
         onSuccess: () => form.reset(),

resources/js/pages/Dynamics/Participants/Show.vue

@@ -3,25 +3,25 @@ import { Head, Link } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
 
 defineOptions({
-    layout: (props: any) => ({
+    layout: {
         breadcrumbs: [
             {
-                title: 'Dynamics',
+                name: 'Dynamics',
                 href: route('dynamics.index'),
+                isCurrent: false,
             },
             {
-                title: props.dynamic.name,
+                name: 'dynamic.name',
-                href: route('dynamics.show', props.dynamic.id),
+                href: 'route(\'dynamics.show\', dynamic.id)',
+                isCurrent: false,
             },
             {
-                title: props.participant.display_name ?? props.participant.name,
+                name: 'participant.display_name',
-                href: route('dynamics.users.show', [
+                href: 'route(\'dynamics.users.show\', { dynamic: dynamic.id, user: participant.id })',
-                    props.dynamic.id,
+                isCurrent: true,
-                    props.participant.id,
-                ]),
             },
         ],
-    }),
+    },
 });
 
 const props = defineProps<{
@@ -44,6 +44,21 @@ const props = defineProps<{
         ledger: { id: number; name: string };
     }>;
 }>();
+
+const breadcrumbs = [
+    {
+        name: 'Dynamics',
+        href: route('dynamics.index'),
+    },
+    {
+        name: props.dynamic.name,
+        href: route('dynamics.show', props.dynamic.id),
+    },
+    {
+        name: props.participant.display_name ?? props.participant.name,
+        href: route('dynamics.users.show', [props.dynamic.id, props.participant.id]),
+    },
+];
 </script>
 
 <template>
@@ -52,10 +67,7 @@ const props = defineProps<{
     <div class="c-participant-show">
         <div class="c-participant-show__container">
             <h2 class="c-participant-show__title">
-                Activity for
+                Activity for {{ participant.display_name ?? participant.name }} ({{ participant.role.toUpperCase() }}) in {{ dynamic.name }}
-                {{ participant.display_name ?? participant.name }} ({{
-                    participant.role.toUpperCase()
-                }}) in {{ dynamic.name }}
             </h2>
 
             <div class="c-participant-show__activity-list">
@@ -64,45 +76,16 @@ const props = defineProps<{
                     :key="mutation.id"
                     class="c-participant-show__activity-item"
                 >
-                    <Link
+                    <Link :href="route('dynamics.ledgers.show', [dynamic.id, mutation.ledger.id])" class="block">
-                        :href="
-                            route('dynamics.ledgers.show', [
-                                dynamic.id,
-                                mutation.ledger.id,
-                            ])
-                        "
-                        class="block"
-                    >
                         <div class="c-participant-show__activity-meta">
                             <span class="c-participant-show__activity-time">
-                                {{
+                                {{ new Date(mutation.created_at).toLocaleString() }}
-                                    new Date(
-                                        mutation.created_at,
-                                    ).toLocaleString()
-                                }}
                             </span>
-                            <span
+                            <span class="font-semibold ml-2" :class="mutation.amount > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'">
-                                class="ml-2 font-semibold"
+                                {{ mutation.amount > 0 ? '+' : '' }}{{ mutation.amount }}
-                                :class="
-                                    mutation.amount > 0
-                                        ? 'text-green-600 dark:text-green-400'
-                                        : 'text-red-600 dark:text-red-400'
-                                "
-                            >
-                                {{ mutation.amount > 0 ? '+' : ''
-                                }}{{ mutation.amount }}
                             </span>
-                            <span class="ml-2 text-neutral-400"
+                            <span class="text-neutral-400 ml-2">on {{ mutation.ledger.name }}</span>
-                                >on {{ mutation.ledger.name }}</span
+                            <span class="uppercase text-xs px-1.5 py-0.5 rounded ml-auto" :class="mutation.status === 'approved' ? 'bg-green-100 text-green-700 dark:bg-green-950/30 dark:text-green-400' : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-950/30 dark:text-yellow-400'">
-                            >
-                            <span
-                                class="ml-auto rounded px-1.5 py-0.5 text-xs uppercase"
-                                :class="
-                                    mutation.status === 'approved'
-                                        ? 'bg-green-100 text-green-700 dark:bg-green-950/30 dark:text-green-400'
-                                        : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-950/30 dark:text-yellow-400'
-                                "
-                            >
                                 {{ mutation.status }}
                             </span>
                         </div>
@@ -111,12 +94,8 @@ const props = defineProps<{
                         </p>
                     </Link>
                 </div>
-                <div
+                <div v-if="mutations.length === 0" class="text-neutral-500 text-sm">
-                    v-if="mutations.length === 0"
+                    No mutations recorded for this participant in this Dynamic yet.
-                    class="text-sm text-neutral-500"
-                >
-                    No mutations recorded for this participant in this Dynamic
-                    yet.
                 </div>
             </div>
         </div>
@@ -156,6 +135,6 @@ const props = defineProps<{
 }
 
 .c-participant-show__activity-desc {
-    @apply mt-1 text-sm text-neutral-600 dark:text-neutral-400;
+    @apply text-sm text-neutral-600 dark:text-neutral-400 mt-1;
 }
 </style>

resources/js/pages/Dynamics/Settings.vue

@@ -1,25 +1,7 @@
 <script setup lang="ts">
 import { Head, useForm, Link as InertiaLink } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
-
+import AppLayout from '@/layouts/AppLayout.vue';
-defineOptions({
-    layout: (props: any) => ({
-        breadcrumbs: [
-            {
-                title: 'Dynamics',
-                href: route('dynamics.index'),
-            },
-            {
-                title: props.dynamic.name,
-                href: route('dynamics.show', props.dynamic.id),
-            },
-            {
-                title: 'Settings',
-                href: route('dynamics.edit', props.dynamic.id),
-            },
-        ],
-    }),
-});
 
 const props = defineProps<{
     dynamic: {
@@ -34,6 +16,21 @@ const form = useForm({
     rules: props.dynamic.rules,
 });
 
+const breadcrumbs = [
+    {
+        name: 'Dynamics',
+        href: route('dynamics.index'),
+    },
+    {
+        name: props.dynamic.name,
+        href: route('dynamics.show', props.dynamic.id),
+    },
+    {
+        name: 'Settings',
+        href: route('dynamics.edit', props.dynamic.id),
+    },
+];
+
 function submit() {
     form.patch(route('dynamics.update', props.dynamic.id));
 }

resources/js/pages/Dynamics/Show.vue

@@ -6,18 +6,20 @@ import { Head, Link as InertiaLink } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
 
 defineOptions({
-    layout: (props: any) => ({
+    layout: {
         breadcrumbs: [
             {
-                title: 'Dynamics',
+                name: 'Dynamics',
                 href: route('dynamics.index'),
+                isCurrent: false,
             },
             {
-                title: props.dynamic.name,
+                name: 'dynamic.name',
-                href: route('dynamics.show', props.dynamic.uuid),
+                href: 'route(\'dynamics.show\', dynamic.id)',
+                isCurrent: true,
             },
         ],
-    }),
+    },
 });
 
 const props = defineProps<{
@@ -43,6 +45,18 @@ const props = defineProps<{
         update: boolean;
     }
 }>();
+
+
+const breadcrumbs = [
+    {
+        name: 'Dynamics',
+        href: route('dynamics.index'),
+    },
+    {
+        name: props.dynamic.name,
+        href: route('dynamics.show', props.dynamic.id),
+    },
+];
 </script>
 
 <template>

resources/js/pages/Ledgers/Create.vue

@@ -1,33 +1,30 @@
 <script setup lang="ts">
 import { Head, useForm } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
+import AppLayout from '@/layouts/AppLayout.vue';
 import CreateLedgerForm from '@/components/CreateLedgerForm.vue';
 
-defineOptions({
-    layout: (props: any) => ({
-        breadcrumbs: [
-            {
-                title: 'Dynamics',
-                href: route('dynamics.index'),
-            },
-            {
-                title: props.dynamic.name,
-                href: route('dynamics.show', props.dynamic.id),
-            },
-            {
-                title: 'Create Ledger',
-                href: route('dynamics.ledgers.create', props.dynamic.id),
-            },
-        ],
-    }),
-});
-
 const props = defineProps<{
     dynamic: {
         id: number;
         name: string;
     };
 }>();
+
+const breadcrumbs = [
+    {
+        name: 'Dynamics',
+        href: route('dynamics.index'),
+    },
+    {
+        name: props.dynamic.name,
+        href: route('dynamics.show', props.dynamic.id),
+    },
+    {
+        name: 'Create Ledger',
+        href: route('dynamics.ledgers.create', props.dynamic.id),
+    },
+];
 </script>
 
 <template>

resources/js/pages/Ledgers/Edit.vue

@@ -1,29 +1,7 @@
 <script setup lang="ts">
-import { Head, useForm, Link } from '@inertiajs/vue3';
+import { Head, useForm } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
-
+import AppLayout from '@/layouts/AppLayout.vue';
-defineOptions({
-    layout: (props: any) => ({
-        breadcrumbs: [
-            {
-                title: 'Dynamics',
-                href: route('dynamics.index'),
-            },
-            {
-                title: props.dynamic.name,
-                href: route('dynamics.show', props.dynamic.id),
-            },
-            {
-                title: props.ledger.name,
-                href: route('dynamics.ledgers.show', [props.dynamic.id, props.ledger.id]),
-            },
-            {
-                title: 'Edit',
-                href: route('dynamics.ledgers.edit', [props.dynamic.id, props.ledger.id]),
-            },
-        ],
-    }),
-});
 
 const props = defineProps<{
     dynamic: {
@@ -42,6 +20,25 @@ const form = useForm({
     rules: props.ledger.rules,
 });
 
+const breadcrumbs = [
+    {
+        name: 'Dynamics',
+        href: route('dynamics.index'),
+    },
+    {
+        name: props.dynamic.name,
+        href: route('dynamics.show', props.dynamic.id),
+    },
+    {
+        name: props.ledger.name,
+        href: route('dynamics.ledgers.show', [props.dynamic.id, props.ledger.id]),
+    },
+    {
+        name: 'Edit',
+        href: route('dynamics.ledgers.edit', [props.dynamic.id, props.ledger.id]),
+    },
+];
+
 function submit() {
     form.put(route('dynamics.ledgers.update', [props.dynamic.id, props.ledger.id]));
 }
@@ -50,43 +47,45 @@ function submit() {
 <template>
     <Head title="Edit Ledger" />
 
-    <div class="c-ledger-edit">
+    <AppLayout :breadcrumbs="breadcrumbs">
-        <div class="c-ledger-edit__container">
+        <div class="c-ledger-edit">
-            <div class="c-ledger-edit__card">
+            <div class="c-ledger-edit__container">
-                <div class="c-ledger-edit__body">
+                <div class="c-ledger-edit__card">
-                    <h3 class="c-ledger-edit__title">
+                    <div class="c-ledger-edit__body">
-                        Edit {{ ledger.name }}
+                        <h3 class="c-ledger-edit__title">
-                    </h3>
+                            Edit {{ ledger.name }}
+                        </h3>
 
-                    <form @submit.prevent="submit" class="c-ledger-edit__form">
+                        <form @submit.prevent="submit" class="c-ledger-edit__form">
-                        <div class="c-ledger-edit__field">
+                            <div class="c-ledger-edit__field">
-                            <label for="name" class="c-ledger-edit__label">Name</label>
+                                <label for="name" class="c-ledger-edit__label">Name</label>
-                            <input v-model="form.name" id="name" type="text" class="c-ledger-edit__input" />
+                                <input v-model="form.name" id="name" type="text" class="c-ledger-edit__input" />
-                        </div>
+                            </div>
 
-                        <div class="c-ledger-edit__field">
+                            <div class="c-ledger-edit__field">
-                            <label for="rules" class="c-ledger-edit__label">Rules</label>
+                                <label for="rules" class="c-ledger-edit__label">Rules</label>
-                            <textarea v-model="form.rules" id="rules" rows="4" class="c-ledger-edit__textarea"></textarea>
+                                <textarea v-model="form.rules" id="rules" rows="4" class="c-ledger-edit__textarea"></textarea>
-                        </div>
+                            </div>
 
-                        <div class="c-ledger-edit__actions">
+                            <div class="c-ledger-edit__actions">
-                            <button type="submit" :disabled="form.processing" class="c-ledger-edit__submit-btn">
+                                <button type="submit" :disabled="form.processing" class="c-ledger-edit__submit-btn">
-                                Save
+                                    Save
-                            </button>
+                                </button>
-                            <Link
+                                <Link
-                                :href="route('dynamics.ledgers.close', [dynamic.id, ledger.id])"
+                                    :href="route('dynamics.ledgers.close', [dynamic.id, ledger.id])"
-                                method="put"
+                                    method="put"
-                                as="button"
+                                    as="button"
-                                class="c-ledger-edit__submit-btn c-ledger-edit__submit-btn--danger"
+                                    class="c-ledger-edit__submit-btn c-ledger-edit__submit-btn--danger"
-                            >
+                                >
-                                Close Ledger
+                                    Close Ledger
-                            </Link>
+                                </Link>
-                        </div>
+                            </div>
-                    </form>
+                        </form>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
+    </AppLayout>
 </template>
 
 <style scoped>

resources/js/pages/Ledgers/PredefinedMutations/Edit.vue

@@ -1,150 +0,0 @@
-<script setup lang="ts">
-import { Head, useForm } from '@inertiajs/vue3';
-import { route } from 'ziggy-js';
-
-defineOptions({
-    layout: (props: any) => ({
-        breadcrumbs: [
-            {
-                title: 'Dynamics',
-                href: route('dynamics.index'),
-            },
-            {
-                title: props.dynamic.name,
-                href: route('dynamics.show', props.dynamic.id),
-            },
-            {
-                title: props.ledger.name,
-                href: route('dynamics.ledgers.show', [props.dynamic.id, props.ledger.id]),
-            },
-            {
-                title: 'Predefined Mutations',
-                href: route('dynamics.ledgers.predefined-mutations.index', [props.dynamic.id, props.ledger.id]),
-            },
-            {
-                title: 'Edit',
-                href: route('dynamics.ledgers.predefined-mutations.edit', [props.dynamic.id, props.ledger.id, props.predefined_mutation.uuid]),
-            },
-        ],
-    }),
-});
-
-const props = defineProps<{
-    dynamic: {
-        id: number;
-        name: string;
-    };
-    ledger: {
-        id: number;
-        name: string;
-    };
-    predefined_mutation: {
-        id: number;
-        name: string;
-        description: string;
-        amount: number;
-        uuid: string;
-    };
-}>();
-
-const form = useForm({
-    name: props.predefined_mutation.name,
-    description: props.predefined_mutation.description,
-    amount: props.predefined_mutation.amount,
-});
-
-function submit() {
-    form.put(route('dynamics.ledgers.predefined-mutations.update', [props.dynamic.id, props.ledger.id, props.predefined_mutation.uuid]));
-}
-</script>
-
-<template>
-    <Head title="Edit Predefined Mutation" />
-
-    <div class="c-predefined-mutation-edit">
-        <div class="c-predefined-mutation-edit__container">
-            <div class="c-predefined-mutation-edit__card">
-                <div class="c-predefined-mutation-edit__body">
-                    <h3 class="c-predefined-mutation-edit__title">
-                        Edit {{ predefined_mutation.name }} on {{ ledger.name }}
-                    </h3>
-
-                    <form @submit.prevent="submit" class="c-predefined-mutation-edit__form">
-                        <div class="c-predefined-mutation-edit__field">
-                            <label for="name" class="c-predefined-mutation-edit__label">Name</label>
-                            <input v-model="form.name" id="name" type="text" class="c-predefined-mutation-edit__input" />
-                        </div>
-
-                        <div class="c-predefined-mutation-edit__field">
-                            <label for="description" class="c-predefined-mutation-edit__label">Description</label>
-                            <textarea v-model="form.description" id="description" rows="4" class="c-predefined-mutation-edit__textarea"></textarea>
-                        </div>
-
-                        <div class="c-predefined-mutation-edit__field">
-                            <label for="amount" class="c-predefined-mutation-edit__label">Amount</label>
-                            <input v-model="form.amount" id="amount" type="number" class="c-predefined-mutation-edit__input" />
-                        </div>
-
-                        <div class="c-predefined-mutation-edit__actions">
-                            <button type="submit" :disabled="form.processing" class="c-predefined-mutation-edit__submit-btn">
-                                Save
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<style scoped>
-@reference "../../../../css/app.css";
-
-.c-predefined-mutation-edit {
-    @apply py-12;
-}
-
-.c-predefined-mutation-edit__container {
-    @apply mx-auto max-w-7xl sm:px-6 lg:px-8;
-}
-
-.c-predefined-mutation-edit__card {
-    @apply overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800;
-}
-
-.c-predefined-mutation-edit__body {
-    @apply p-6 text-gray-900 dark:text-gray-100;
-}
-
-.c-predefined-mutation-edit__title {
-    @apply text-lg font-medium;
-}
-
-.c-predefined-mutation-edit__form {
-    @apply mt-6 space-y-6;
-}
-
-.c-predefined-mutation-edit__field {
-    @apply block;
-}
-
-.c-predefined-mutation-edit__label {
-    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
-}
-
-.c-predefined-mutation-edit__input {
-    @apply 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;
-}
-
-.c-predefined-mutation-edit__textarea {
-    @apply 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;
-}
-
-.c-predefined-mutation-edit__actions {
-    @apply flex items-center gap-4;
-}
-
-.c-predefined-mutation-edit__submit-btn {
-    @apply 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;
-}
-</style>

resources/js/pages/Ledgers/PredefinedMutations/Index.vue

@@ -1,31 +1,9 @@
 <script setup lang="ts">
-import { Head, useForm, Link as InertiaLink } from '@inertiajs/vue3';
+import { Head, useForm } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
+import AppLayout from '@/layouts/AppLayout.vue';
 import { defineProps } from 'vue';
 
-defineOptions({
-    layout: (props: any) => ({
-        breadcrumbs: [
-            {
-                title: 'Dynamics',
-                href: route('dynamics.index'),
-            },
-            {
-                title: props.dynamic.name,
-                href: route('dynamics.show', props.dynamic.id),
-            },
-            {
-                title: props.ledger.name,
-                href: route('dynamics.ledgers.show', [props.dynamic.id, props.ledger.id]),
-            },
-            {
-                title: 'Predefined Mutations',
-                href: route('dynamics.ledgers.predefined-mutations.index', [props.dynamic.id, props.ledger.id]),
-            },
-        ],
-    }),
-});
-
 const props = defineProps<{
     dynamic: {
         id: number;
@@ -40,7 +18,6 @@ const props = defineProps<{
         name: string;
         description: string;
         amount: number;
-        uuid: string;
     }>;
 }>();
 
@@ -50,135 +27,133 @@ const form = useForm({
     amount: 0,
 });
 
+const breadcrumbs = [
+    {
+        name: 'Dynamics',
+        href: route('dynamics.index'),
+    },
+    {
+        name: props.dynamic.name,
+        href: route('dynamics.show', props.dynamic.id),
+    },
+    {
+        name: props.ledger.name,
+        href: route('dynamics.ledgers.show', [props.dynamic.id, props.ledger.id]),
+    },
+    {
+        name: 'Predefined Mutations',
+        href: route('dynamics.ledgers.predefined-mutations.index', [props.dynamic.id, props.ledger.id]),
+    },
+];
+
 function submit() {
     form.post(route('dynamics.ledgers.predefined-mutations.store', [props.dynamic.id, props.ledger.id]), {
         onSuccess: () => form.reset(),
     });
 }
-
-function destroy(uuid: string) {
-    if (confirm('Are you sure you want to delete this predefined mutation?')) {
-        const deleteForm = useForm({});
-        deleteForm.delete(route('dynamics.ledgers.predefined-mutations.destroy', [props.dynamic.id, props.ledger.id, uuid]));
-    }
-}
 </script>
 
 <template>
     <Head title="Predefined Mutations" />
 
-    <div class="c-predefined-mutations">
+    <AppLayout :breadcrumbs="breadcrumbs">
-        <div class="c-predefined-mutations__container">
+        <div class="c-predefined-mutations">
-            <div class="c-predefined-mutations__card">
+            <div class="c-predefined-mutations__container">
-                <div class="c-predefined-mutations__body">
+                <div class="c-predefined-mutations__card">
-                    <h3 class="c-predefined-mutations__title">
+                    <div class="c-predefined-mutations__body">
-                        Predefined Mutations for {{ ledger.name }}
+                        <h3 class="c-predefined-mutations__title">
-                    </h3>
+                            Predefined Mutations for {{ ledger.name }}
+                        </h3>
 
-                    <div class="c-predefined-mutations__list">
+                        <div class="c-predefined-mutations__list">
-                        <div
+                            <div
-                            v-for="mutation in predefined_mutations"
+                                v-for="mutation in predefined_mutations"
-                            :key="mutation.id"
+                                :key="mutation.id"
-                            class="c-predefined-mutations__item"
+                                class="c-predefined-mutations__item"
-                        >
+                            >
-                            <div class="c-predefined-mutations__item-details">
+                                <div class="c-predefined-mutations__item-details">
-                                <h4 class="c-predefined-mutations__item-name">
+                                    <h4 class="c-predefined-mutations__item-name">
-                                    {{ mutation.name }}
+                                        {{ mutation.name }}
-                                </h4>
+                                    </h4>
-                                <p class="c-predefined-mutations__item-description">
+                                    <p class="c-predefined-mutations__item-description">
-                                    {{ mutation.description }}
+                                        {{ mutation.description }}
-                                </p>
+                                    </p>
-                            </div>
+                                </div>
-                            <div class="flex items-center gap-6">
                                 <div class="c-predefined-mutations__item-amount">
                                     {{ mutation.amount }}
                                 </div>
-                                <div class="flex items-center gap-2">
-                                    <InertiaLink
-                                        :href="route('dynamics.ledgers.predefined-mutations.edit', [dynamic.id, ledger.id, mutation.uuid])"
-                                        class="c-predefined-mutations__edit-btn"
-                                    >
-                                        Edit
-                                    </InertiaLink>
-                                    <button
-                                        @click="destroy(mutation.uuid)"
-                                        class="c-predefined-mutations__delete-btn"
-                                    >
-                                        Delete
-                                    </button>
-                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="c-predefined-mutations__card mt-8">
+                <div class="c-predefined-mutations__card mt-8">
-                <div class="c-predefined-mutations__body">
+                    <div class="c-predefined-mutations__body">
-                    <h3 class="c-predefined-mutations__title">
+                        <h3 class="c-predefined-mutations__title">
-                        Create New Predefined Mutation
+                            Create New Predefined Mutation
-                    </h3>
+                        </h3>
 
-                    <form
+                        <form
-                        @submit.prevent="submit"
+                            @submit.prevent="submit"
-                        class="c-predefined-mutations__form"
+                            class="c-predefined-mutations__form"
-                    >
+                        >
-                        <div class="c-predefined-mutations__field">
+                            <div class="c-predefined-mutations__field">
-                            <label
+                                <label
-                                for="name"
+                                    for="name"
-                                class="c-predefined-mutations__label"
+                                    class="c-predefined-mutations__label"
-                                >Name</label
+                                    >Name</label
-                            >
+                                >
-                            <input
+                                <input
-                                v-model="form.name"
+                                    v-model="form.name"
-                                id="name"
+                                    id="name"
-                                type="text"
+                                    type="text"
-                                class="c-predefined-mutations__input"
+                                    class="c-predefined-mutations__input"
-                            />
+                                />
-                        </div>
+                            </div>
 
-                        <div class="c-predefined-mutations__field">
+                            <div class="c-predefined-mutations__field">
-                            <label
+                                <label
-                                for="description"
+                                    for="description"
-                                class="c-predefined-mutations__label"
+                                    class="c-predefined-mutations__label"
-                                >Description</label
+                                    >Description</label
-                            >
+                                >
-                            <textarea
+                                <textarea
-                                v-model="form.description"
+                                    v-model="form.description"
-                                id="description"
+                                    id="description"
-                                rows="4"
+                                    rows="4"
-                                class="c-predefined-mutations__textarea"
+                                    class="c-predefined-mutations__textarea"
-                            ></textarea>
+                                ></textarea>
-                        </div>
+                            </div>
 
-                        <div class="c-predefined-mutations__field">
+                            <div class="c-predefined-mutations__field">
-                            <label
+                                <label
-                                for="amount"
+                                    for="amount"
-                                class="c-predefined-mutations__label"
+                                    class="c-predefined-mutations__label"
-                                >Amount</label
+                                    >Amount</label
-                            >
+                                >
-                            <input
+                                <input
-                                v-model="form.amount"
+                                    v-model="form.amount"
-                                id="amount"
+                                    id="amount"
-                                type="number"
+                                    type="number"
-                                class="c-predefined-mutations__input"
+                                    class="c-predefined-mutations__input"
-                            />
+                                />
-                        </div>
+                            </div>
 
-                        <div class="c-predefined-mutations__actions">
+                            <div class="c-predefined-mutations__actions">
-                            <button
+                                <button
-                                type="submit"
+                                    type="submit"
-                                :disabled="form.processing"
+                                    :disabled="form.processing"
-                                class="c-predefined-mutations__submit-btn"
+                                    class="c-predefined-mutations__submit-btn"
-                            >
+                                >
-                                Create
+                                    Create
-                            </button>
+                                </button>
-                        </div>
+                            </div>
-                    </form>
+                        </form>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
+    </AppLayout>
 </template>
 
 <style scoped>
@@ -228,14 +203,6 @@ function destroy(uuid: string) {
     @apply text-lg font-semibold;
 }
 
-.c-predefined-mutations__edit-btn {
-    @apply inline-flex cursor-pointer items-center rounded border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-semibold text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600;
-}
-
-.c-predefined-mutations__delete-btn {
-    @apply inline-flex cursor-pointer items-center rounded border border-transparent bg-red-600 px-2.5 py-1.5 text-xs font-semibold text-white shadow-sm hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
-}
-
 .c-predefined-mutations__form {
     @apply mt-6 space-y-6;
 }
@@ -256,6 +223,10 @@ function destroy(uuid: string) {
     @apply 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;
 }
 
+.c-predefined-mutations__select {
+    @apply mt-1 block w-full rounded-md border-gray-300 bg-white p-2 text-sm 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;
+}
+
 .c-predefined-mutations__actions {
     @apply flex items-center gap-4;
 }

resources/js/pages/Ledgers/Show.vue

@@ -8,22 +8,25 @@ import Chat from '@/components/Chat.vue';
 import MutationList from '@/components/MutationList.vue';
 
 defineOptions({
-    layout: (props: any) => ({
+    layout: {
         breadcrumbs: [
             {
-                title: 'Dynamics',
+                name: 'Dynamics',
                 href: route('dynamics.index'),
+                isCurrent: false,
             },
             {
-                title: props.dynamic.name,
+                name: 'dynamic.name',
-                href: route('dynamics.show', props.dynamic.id),
+                href: 'route(\'dynamics.show\', dynamic.id)',
+                isCurrent: false,
             },
             {
-                title: props.ledger.name,
+                name: 'ledger.name',
-                href: route('dynamics.ledgers.show', [props.dynamic.id, props.ledger.id]),
+                href: 'route(\'dynamics.ledgers.show\', { dynamic: dynamic.id, ledger: ledger.id })',
+                isCurrent: true,
             },
         ],
-    }),
+    },
 });
 
 const props = defineProps<{
@@ -43,7 +46,6 @@ const props = defineProps<{
         score: number;
         rules: string;
         alignment: string;
-        status: string;
         media?: Array<{ id: number; url: string; mime_type: string }>;
         mutations: Array<{
             id: number;
@@ -57,15 +59,30 @@ const props = defineProps<{
             media?: Array<{ id: number; url: string; mime_type: string }>;
         }>;
     };
-    can: {
+    isOwner: boolean;
-        update: boolean;
-        close: boolean;
-    };
     messages: {
         data: Array<any>;
         next_page_url: string | null;
     };
-    }>();
+}>();
+
+const breadcrumbs = [
+    {
+        name: 'Dynamics',
+        href: route('dynamics.index'),
+    },
+    {
+        name: props.dynamic.name,
+        href: route('dynamics.show', props.dynamic.id),
+    },
+    {
+        name: props.ledger.name,
+        href: route('dynamics.ledgers.show', {
+            dynamic: props.dynamic.id,
+            ledger: props.ledger.id,
+        }),
+    },
+];
 
 // Lightbox Modal state
 const activeLightboxUrl = ref<string | null>(null);
@@ -188,7 +205,7 @@ function isOwnerUser(userId: number): boolean {
                                 {{ ledger.rules }}
                             </p>
                         </div>
-                        <div v-if="can.update" class="flex flex-col gap-2">
+                        <div v-if="isOwner" class="flex flex-col gap-2">
                             <InertiaLink
                                 :href="route('dynamics.ledgers.predefined-mutations.index', [dynamic.id, ledger.id])"
                                 class="c-ledger-show__manage-btn"
@@ -270,7 +287,7 @@ function isOwnerUser(userId: number): boolean {
                 :ledger-id="ledger.id"
                 :mutations="ledger.mutations"
                 :participants="dynamic.participants"
-                :can-update="can.update"
+                :is-owner="isOwner"
                 :ledger-alignment="ledger.alignment"
                 @open-lightbox="openLightbox"
             />

resources/js/pages/Participants/Show.vue

@@ -0,0 +1,260 @@
+<script setup lang="ts">
+import { Head, Link as InertiaLink } from '@inertiajs/vue3';
+import { route } from 'ziggy-js';
+
+const props = defineProps<{
+    dynamic: {
+        id: number;
+        name: string;
+    };
+    participant: {
+        id: number;
+        name: string;
+        display_name: string | null;
+        role: string;
+    };
+    mutations: Array<{
+        id: number;
+        ledger_id: number;
+        ledger: {
+            id: number;
+            name: string;
+            alignment: string;
+        };
+        amount: number;
+        description: string;
+        status: string;
+        created_at: string;
+    }>;
+}>();
+
+const breadcrumbs = [
+    {
+        name: 'Dynamics',
+        href: route('dynamics.index'),
+    },
+    {
+        name: props.dynamic.name,
+        href: route('dynamics.show', props.dynamic.id),
+    },
+    {
+        name: props.participant.display_name ?? props.participant.name,
+        href: route('dynamics.users.show', [props.dynamic.id, props.participant.id]),
+    },
+];
+
+function getAmountClass(amount: number, alignment: string): string {
+    if (alignment === 'positive') {
+        return amount > 0
+            ? 'c-participant-show__activity-amount--positive'
+            : 'c-participant-show__activity-amount--negative';
+    }
+
+    if (alignment === 'negative') {
+        return amount < 0
+            ? 'c-participant-show__activity-amount--positive'
+            : 'c-participant-show__activity-amount--negative';
+    }
+
+    return 'c-participant-show__activity-amount--neutral';
+}
+</script>
+
+<template>
+    <Head :title="participant.display_name ?? participant.name" />
+
+    <div class="c-participant-show">
+        <div class="c-participant-show__container">
+            <!-- Header Card -->
+            <div class="c-participant-show__card">
+                <div class="c-participant-show__body">
+                    <div class="flex justify-between items-center">
+                        <div>
+                            <span class="c-participant-show__role-badge">
+                                {{ participant.role }}
+                            </span>
+                            <h3 class="c-participant-show__title mt-1">
+                                {{ participant.display_name ?? participant.name }}
+                            </h3>
+                            <p v-if="participant.display_name" class="c-participant-show__subtitle">
+                                Real Name: {{ participant.name }}
+                            </p>
+                        </div>
+                        <InertiaLink :href="route('dynamics.show', dynamic.id)" class="c-participant-show__back-btn">
+                            Back to Dynamic
+                        </InertiaLink>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Recent Activity Block -->
+            <div class="c-participant-show__activity mt-8">
+                <h4 class="c-participant-show__activity-title">Recent Activity</h4>
+                
+                <div v-if="mutations.length > 0" class="c-participant-show__activity-list mt-4">
+                    <div
+                        v-for="mutation in mutations"
+                        :key="mutation.id"
+                        class="c-participant-show__activity-item"
+                    >
+                        <div class="flex justify-between items-start">
+                            <div>
+                                <InertiaLink
+                                    :href="route('dynamics.ledgers.show', [dynamic.id, mutation.ledger_id])"
+                                    class="c-participant-show__activity-ledger"
+                                >
+                                    {{ mutation.ledger.name }}
+                                </InertiaLink>
+                                <p class="c-participant-show__activity-desc mt-1">
+                                    {{ mutation.description }}
+                                </p>
+                            </div>
+                            <div class="text-right">
+                                <span
+                                    :class="getAmountClass(mutation.amount, mutation.ledger.alignment)"
+                                    class="c-participant-show__activity-amount"
+                                >
+                                    {{ mutation.amount > 0 ? '+' : '' }}{{ mutation.amount }}
+                                </span>
+                                <div class="c-participant-show__activity-meta mt-1">
+                                    <span
+                                        :class="{
+                                            'c-participant-show__activity-status--pending': mutation.status === 'pending',
+                                            'c-participant-show__activity-status--approved': mutation.status === 'approved',
+                                            'c-participant-show__activity-status--rejected': mutation.status === 'rejected',
+                                        }"
+                                        class="c-participant-show__activity-status"
+                                    >
+                                        {{ mutation.status }}
+                                    </span>
+                                    <span class="c-participant-show__activity-time ml-2">
+                                        {{ new Date(mutation.created_at).toLocaleDateString() }}
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div v-else class="c-participant-show__empty mt-4">
+                    No recent activity found for this participant.
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+@reference "../../../css/app.css";
+
+.c-participant-show {
+    @apply py-12;
+}
+
+.c-participant-show__container {
+    @apply mx-auto max-w-7xl sm:px-6 lg:px-8;
+}
+
+.c-participant-show__card {
+    @apply overflow-hidden;
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+}
+
+.c-participant-show__body {
+    @apply p-6;
+    color: var(--foreground);
+}
+
+.c-participant-show__role-badge {
+    @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold uppercase tracking-wider;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    opacity: 0.8;
+}
+
+.c-participant-show__title {
+    @apply text-2xl font-bold;
+}
+
+.c-participant-show__subtitle {
+    @apply mt-1 text-sm;
+    color: var(--muted-foreground);
+}
+
+.c-participant-show__back-btn {
+    @apply 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;
+}
+
+.c-participant-show__activity-title {
+    @apply text-lg font-medium;
+    color: var(--foreground);
+}
+
+.c-participant-show__activity-list {
+    @apply space-y-4;
+}
+
+.c-participant-show__activity-item {
+    @apply p-4;
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+}
+
+.c-participant-show__activity-ledger {
+    @apply font-semibold hover:underline text-sm;
+    color: var(--primary);
+}
+
+.c-participant-show__activity-desc {
+    @apply text-sm;
+    color: var(--foreground);
+}
+
+.c-participant-show__activity-amount {
+    @apply font-bold text-sm;
+}
+
+.c-participant-show__activity-amount--positive {
+    @apply text-green-500;
+}
+
+.c-participant-show__activity-amount--negative {
+    @apply text-red-500;
+}
+
+.c-participant-show__activity-amount--neutral {
+    @apply text-neutral-500;
+}
+
+.c-participant-show__activity-meta {
+    @apply flex items-center justify-end text-xs;
+}
+
+.c-participant-show__activity-status {
+    @apply rounded px-1.5 py-0.5 text-[9px] font-medium tracking-wider uppercase;
+}
+
+.c-participant-show__activity-status--pending {
+    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
+}
+
+.c-participant-show__activity-status--approved {
+    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
+}
+
+.c-participant-show__activity-status--rejected {
+    @apply bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
+}
+
+.c-participant-show__activity-time {
+    color: var(--muted-foreground);
+}
+
+.c-participant-show__empty {
+    @apply text-sm text-center py-8;
+    color: var(--muted-foreground);
+}
+</style>

routes/web.php

@@ -30,7 +30,7 @@ Route::middleware(['auth', 'verified'])->group(function () {
     Route::put('/dynamics/{dynamic}/ledgers/{ledger}/close', [LedgerController::class, 'close'])->name('dynamics.ledgers.close');
     Route::resource('dynamics.ledgers', LedgerController::class)->scoped()->except(['create']);
 
-    Route::resource('dynamics.ledgers.predefined-mutations', PredefinedMutationController::class)->scoped();
+    Route::resource('dynamics.predefined-mutations', PredefinedMutationController::class)->scoped();
 
     Route::put('/dynamics/{dynamic}/ledgers/{ledger}/mutations/{mutation}/void', [MutationController::class, 'void'])->name('dynamics.ledgers.mutations.void');
     Route::resource('dynamics.ledgers.mutations', MutationController::class)->scoped();

tests/Feature/PredefinedMutationTest.php

@@ -1,18 +1,16 @@
 <?php
 
-use App\Models\User;
 use App\Models\Dynamic;
-use App\Models\Ledger;
 use App\Models\PredefinedMutation;
+use App\Models\User;
 
-test('owner can view predefined mutations for ledger', function () {
+test('owner can view predefined mutations for dynamic', function () {
     $owner = User::factory()->create();
     $dynamic = Dynamic::factory()->create();
     $dynamic->participants()->attach($owner->id, ['role' => 'owner']);
-    $ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id]);
 
     $predefined = PredefinedMutation::create([
-        'ledger_id' => $ledger->id,
+        'dynamic_id' => $dynamic->id,
         'name' => 'Weekly Room Cleaning',
         'description' => 'Cleaned up the master bedroom',
         'amount' => 20,
@@ -20,147 +18,71 @@ test('owner can view predefined mutations for ledger', function () {
 
     $this->actingAs($owner);
 
-    $response = $this->get(route('dynamics.ledgers.predefined-mutations.index', [$dynamic->uuid, $ledger->uuid]));
+    $response = $this->get(route('dynamics.predefined-mutations.index', $dynamic->uuid));
 
     $response->assertOk();
     $response->assertInertia(fn ($page) => $page
-        ->component('Ledgers/PredefinedMutations/Index')
+        ->component('Dynamics/PredefinedMutations/Index')
-        ->where('dynamic.id', $dynamic->id)
-        ->where('ledger.id', $ledger->id)
         ->has('predefined_mutations', 1)
         ->where('predefined_mutations.0.name', 'Weekly Room Cleaning')
     );
 });
 
-test('non-owner cannot view predefined mutations for ledger', function () {
+test('non-owner cannot view predefined mutations for dynamic', 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]);
 
     $this->actingAs($participant);
 
-    $response = $this->get(route('dynamics.ledgers.predefined-mutations.index', [$dynamic->uuid, $ledger->uuid]));
+    $response = $this->get(route('dynamics.predefined-mutations.index', $dynamic->uuid));
 
     $response->assertStatus(403);
 });
 
-test('owner can create predefined mutations for ledger', function () {
+test('owner can create predefined mutations for dynamic', function () {
     $owner = User::factory()->create();
     $dynamic = Dynamic::factory()->create();
     $dynamic->participants()->attach($owner->id, ['role' => 'owner']);
-    $ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id]);
 
     $this->actingAs($owner);
 
-    $response = $this->post(route('dynamics.ledgers.predefined-mutations.store', [$dynamic->uuid, $ledger->uuid]), [
+    $response = $this->post(route('dynamics.predefined-mutations.store', $dynamic->uuid), [
         'name' => 'Polished mirrors',
         'description' => 'Mirror polishing in dungeon',
         'amount' => 15,
+        'type' => 'reward',
     ]);
 
     $response->assertRedirect();
     $this->assertDatabaseHas('predefined_mutations', [
-        'ledger_id' => $ledger->id,
+        'dynamic_id' => $dynamic->id,
         'name' => 'Polished mirrors',
         'amount' => 15,
     ]);
 });
 
-test('non-owner cannot create predefined mutations for ledger', function () {
+test('non-owner cannot create predefined mutations for dynamic', 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]);
 
     $this->actingAs($participant);
 
-    $response = $this->post(route('dynamics.ledgers.predefined-mutations.store', [$dynamic->uuid, $ledger->uuid]), [
+    $response = $this->post(route('dynamics.predefined-mutations.store', $dynamic->uuid), [
         'name' => 'Polished mirrors',
         'description' => 'Mirror polishing in dungeon',
         'amount' => 15,
+        'type' => 'reward',
     ]);
 
     $response->assertStatus(403);
     $this->assertDatabaseMissing('predefined_mutations', [
-        'ledger_id' => $ledger->id,
+        'dynamic_id' => $dynamic->id,
         'name' => 'Polished mirrors',
     ]);
 });
-
-test('owner can view edit form for predefined mutation', function () {
-    $owner = User::factory()->create();
-    $dynamic = Dynamic::factory()->create();
-    $dynamic->participants()->attach($owner->id, ['role' => 'owner']);
-    $ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id]);
-
-    $predefined = PredefinedMutation::create([
-        'ledger_id' => $ledger->id,
-        'name' => 'Polished mirrors',
-        'description' => 'Mirror polishing in dungeon',
-        'amount' => 15,
-    ]);
-
-    $this->actingAs($owner);
-
-    $response = $this->get(route('dynamics.ledgers.predefined-mutations.edit', [$dynamic->uuid, $ledger->uuid, $predefined->uuid]));
-
-    $response->assertOk();
-    $response->assertInertia(fn ($page) => $page
-        ->component('Ledgers/PredefinedMutations/Edit')
-        ->where('predefined_mutation.id', $predefined->id)
-    );
-});
-
-test('owner can update predefined mutation', function () {
-    $owner = User::factory()->create();
-    $dynamic = Dynamic::factory()->create();
-    $dynamic->participants()->attach($owner->id, ['role' => 'owner']);
-    $ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id]);
-
-    $predefined = PredefinedMutation::create([
-        'ledger_id' => $ledger->id,
-        'name' => 'Old Name',
-        'amount' => 10,
-    ]);
-
-    $this->actingAs($owner);
-
-    $response = $this->put(route('dynamics.ledgers.predefined-mutations.update', [$dynamic->uuid, $ledger->uuid, $predefined->uuid]), [
-        'name' => 'New Name',
-        'amount' => 20,
-    ]);
-
-    $response->assertRedirect();
-    $this->assertDatabaseHas('predefined_mutations', [
-        'id' => $predefined->id,
-        'name' => 'New Name',
-        'amount' => 20,
-    ]);
-});
-
-test('owner can delete predefined mutation', function () {
-    $owner = User::factory()->create();
-    $dynamic = Dynamic::factory()->create();
-    $dynamic->participants()->attach($owner->id, ['role' => 'owner']);
-    $ledger = Ledger::factory()->create(['dynamic_id' => $dynamic->id]);
-
-    $predefined = PredefinedMutation::create([
-        'ledger_id' => $ledger->id,
-        'name' => 'To Delete',
-        'amount' => 10,
-    ]);
-
-    $this->actingAs($owner);
-
-    $response = $this->delete(route('dynamics.ledgers.predefined-mutations.destroy', [$dynamic->uuid, $ledger->uuid, $predefined->uuid]));
-
-    $response->assertRedirect();
-    $this->assertDatabaseMissing('predefined_mutations', [
-        'id' => $predefined->id,
-    ]);
-});