refactor: Deconstruct Chat.vue into clean single-responsibility sub-components

DECISIONS.md

@@ -59,6 +59,27 @@ We created `app/Services/ActivityService.php` to centralize the creation of syst
 *   **Polymorphic Subject Linking**: System messages are linked to relevant entities (e.g., a `User` who joined a dynamic, a `Ledger` that was created) via a polymorphic `subject` relationship on the `messages` table. This allows system messages on the dashboard to link directly to the relevant entity.
 *   **Seeder Refactoring**: The `DatabaseSeeder` was refactored to use the `ActivityService` to generate all system messages, ensuring consistency.
 
+### 8. Event-Driven Automated System Logging
+We relocated the dynamic system activity message generation out of individual controller endpoints and into the **Eloquent `Mutation` Model's `booted` -> `created` event hook**.
+*   **Unified generation:** Any mutation creation (whether occurring via a controller submission, an automated Pest test factory, or seeders during `php artisan db:seed`) now automatically and reliably generates correct system log messages.
+*   **Database Seeder fixed:** Reverted the database seeder (`DatabaseSeeder.php`) back to using standard clean Eloquent creations. Since model events automatically trigger, `php artisan db:seed` executes cleanly and builds a rich, fully populated database history with system messages out-of-the-box.
+
+### 9. Standardized Policy-Driven UI Capabilities (`can` prop)
+To maintain strict data security and clean up front-end markup, we eliminated unstandardized, hardcoded client-side role checks (like `isOwner` properties or manual `pivot.role === 'owner'` checks) and replaced them completely with dynamic **policy-driven capabilities** returned directly from Laravel policies as `can` objects.
+*   **Centralized checks:** Both the dynamic and ledger show routes return a standard `can` prop to the frontend (e.g., `can: { update: boolean, close: boolean }`).
+*   **Polymorphic Resource Capabilities:** Each mutation model is wrapped in `MutationResource` which appends its own localized policy checks (`update` for approving suggestions, `void` for voiding) at the individual record level.
+*   **State-based policies:** The `MutationPolicy` methods enforce both ownership authorization and state-based business constraints simultaneously (e.g., a mutation can be approved/updated *only* if its status is currently `'pending'`; and can be voided *only* if its status is not `'voided'`). This keeps the Vue templates purely declarative (e.g., `v-if="mutation.can.update"`) and automatically protects the backend controllers against illegal state transitions.
+
+### 10. Ledger-Scoped Predefined Mutation Templates ("Rewards")
+Predefined mutations act as point-based templates ("purchases" or reusable chores) and belong strictly to specific **Ledgers** instead of broad Dynamics.
+*   **Domain Alignment:** Moving the resource nesting under ledgers (`dynamics.ledgers.predefined-mutations`) aligns perfectly with the mental model of spending points on a ledger.
+*   **Type-Less Rewards:** To simplify both the database schema and UI/UX, we eliminated the explicit `type` column ('reward' vs. 'penalty') from predefined mutations. They act as generic point-carrying "Rewards" whose amount can naturellement be positive (earning points) or negative (making a purchase / deducting points) without requiring restrictive explicit categorization.
+
+### 11. Silent XHR Chat Pagination & Smooth Scrolling UX
+To optimize chat-feed performance and improve overall user experience:
+*   **Silent pagination (No URL pollution):** Rather than using Inertia `router.get` visits which push `?page=x` into the browser URL and break history during page reloads, we implemented a **silent background fetch** (using native browser `fetch()`) that queries our dedicated messages JSON API endpoints and prepends older messages silently to the feed.
+*   **Scroll Preservation:** Added `preserveScroll: true` to the Inertia `form.post` call in `Chat.vue` to prevent the active page scroll position from jumping or shifting when a new message is successfully submitted.
+
 ## Initial Database Schema
 
 I will start with a basic schema and evolve it as I build features.

GEMINI.md

@@ -14,4 +14,19 @@ Welcome to the Ledgerrz codebase! This file defines the persistent guidelines, a
 *   **PHP/Laravel:** PHP 8.4 & Laravel 13. Adhere to typed parameters and return values. Ensure controllers extend properly and use required authorization traits (e.g., `AuthorizesRequests`).
 *   **Frontend Styling (BEM):** Replaced direct Tailwind inline utility-class markup with **BEM (Block, Element, Modifier)**. All custom component styles must live inside `<style scoped>` blocks with a relative `@reference "../../css/app.css"` directive to pull variables without duplications.
 *   **Real-time Broadcasting:** Powered by `@laravel/echo-vue` with fallback configurations and Vite deduplication rules configured in `vite.config.ts`.
-*   **Testing:** Powered by Pest PHP (v4). Every backend controller, event, or model change must be validated by running `vendor/bin/pest`.
+*   **Testing & Isolation:** Powered by Pest PHP (v4). Every backend controller, event, or model change must be validated by running tests. To prevent local `.env` variables from polluting the CLI test execution (causing CSRF/session 419 errors), **always** run tests in an isolated environment using:
+    ```bash
+    env -i PATH="$PATH" php artisan test
+    ```
+*   **Standardized Authorization (`can` prop):** Never write manual role checks (such as `pivot.role === 'owner'`) or hardcoded boolean flags (such as `isOwner`) inside Vue pages or components. Instead, always leverage Laravel policies on the backend and pass permissions reactively to the frontend as structured `can` objects (e.g., `can: { update: boolean, close: boolean }`).
+*   **Vue-Defined Breadcrumbs Layout:** All page-specific breadcrumbs should be declared locally inside the page's `.vue` file rather than returned from controllers. For dynamic, prop-dependent paths, always use the Inertia v3 layout callback function inside `defineOptions`:
+    ```typescript
+    defineOptions({
+        layout: (props: any) => ({
+            breadcrumbs: [
+                { title: 'Dynamics', href: route('dynamics.index') },
+                { title: props.dynamic.name, href: route('dynamics.show', props.dynamic.id) }
+            ]
+        })
+    });
+    ```

IDEA.md

@@ -41,3 +41,27 @@ During this session, we successfully built out and verified several core archite
    * Configured real-time notifications utilizing Laravel Reverb.
    * Documented CLI environment test pollution learnings inside `AGENTS.md` to prevent future CSRF `419` errors.
    * Ensured full production assets compilation (`npm run build`) and achieved **45/45 passing Pest PHP tests with 206 assertions**.
+
+6. **Ledger-Scoped Predefined Mutation Templates ("Rewards")**:
+   * Associated reusable point-based predefined mutation templates under specific Ledgers rather than broad Dynamics, mapping perfectly to the mental model of spending points on a ledger.
+   * Designed them purely as "Rewards" with positive or negative point amounts (handling both demerit-purchases and chores), removing the obsolete `type` categorization for a simpler, type-less, and sleeker UI/UX.
+
+7. **User Activity Profiling & Detail Pages**:
+   * Created a dynamic user detail page (`dynamics.users.show`) scoped to each dynamic. It displays a participant's role, custom display name, fallback real name, and a clean chronological listing of their 10 most recent mutations (activities) in that dynamic.
+
+8. **Polymorphic System Message placeholders & Dynamic Client-Side Linking**:
+   * Refactored system log activity messages to use native `<user:userId>` placeholders and associated them with polymorphic `subject_id` and `subject_type` objects.
+   * On the client-side, the chat component parses these placeholders into rich, clickable links to User Profiles, and dynamically matches and wraps referenced ledger names into links pointing directly to the ledger show page.
+   * Added backend-side placeholder resolution inside `ActivityService` for the dashboard, ensuring unread system logs translate cleanly to real names across multiple dynamics.
+
+9. **Vite/Inertia v3 Layout Callback Breadcrumbs**:
+   * Utilized Inertia v3's powerful new layout callback API inside Vue page `defineOptions` to reactively resolve page-specific dynamic breadcrumbs at runtime using parsed page props, making the pages self-contained and keeping PHP controllers beautifully slim.
+
+10. **Silent background Chat Pagination & Smooth Scrolling UX**:
+    * Implemented silent background XHR queries (using native browser `fetch()`) on our dedicated message JSON API routes to load older chat pages, completely bypassing browser history/URL pollution and preserving page state on refreshes.
+    * Integrated `preserveScroll: true` inside chat form submissions to completely prevent scroll jumps when sending messages.
+
+11. **Standardized Policy-Driven UI Capabilities**:
+    * Eliminated unstandardized client-side role checks and boolean flags, replacing them with structured `can` capability objects returned directly from Laravel policies.
+    * Combined permission validation with state-based business constraints in `MutationPolicy` (e.g., suggestions can be approved/rejected only if `'pending'`; and voided only if not `'voided'`), securing both the frontend action buttons and backend controllers simultaneously.
+    * Achieved **65/65 passing Pest PHP tests with 333 assertions**.

app/Http/Controllers/DynamicController.php

@@ -62,7 +62,7 @@ class DynamicController extends Controller
             'dynamic' => new DynamicResource($dynamic),
             'ledgers' => LedgerResource::collection($dynamic->ledgers),
             'participants' => UserResource::collection($dynamic->participants),
-            'messages' => MessageResource::collection($dynamic->chat->messages()->with(['user', 'media'])->latest()->paginate(10)),
+            'messages' => MessageResource::collection($dynamic->chat->messages()->with(['user', 'media'])->latest()->paginate(\App\Models\Message::PAGINATION_COUNT)),
             'can' => [
                 'update' => $request->user()->can('update', $dynamic),
             ],
@@ -73,7 +73,7 @@ class DynamicController extends Controller
     {
         $this->authorize('view', $dynamic);
 
-        return MessageResource::collection($dynamic->chat->messages()->with(['user', 'media'])->latest()->paginate(10));
+        return MessageResource::collection($dynamic->chat->messages()->with(['user', 'media'])->latest()->paginate(\App\Models\Message::PAGINATION_COUNT));
     }
 
     /**

app/Http/Controllers/LedgerController.php

@@ -87,7 +87,7 @@ class LedgerController extends Controller
             'ledger' => new LedgerResource($ledger),
             'mutations' => MutationResource::collection($ledger->mutations),
             'participants' => UserResource::collection($dynamic->participants),
-            'messages' => MessageResource::collection($dynamic->chat->messages()->with(['user', 'media'])->latest()->paginate(10)),
+            'messages' => MessageResource::collection($dynamic->chat->messages()->with(['user', 'media'])->latest()->paginate(\App\Models\Message::PAGINATION_COUNT)),
             'can' => [
                 'update' => $request->user()->can('update', $ledger),
                 'close' => $request->user()->can('close', $ledger),
@@ -99,7 +99,7 @@ class LedgerController extends Controller
     {
         $this->authorize('view', $ledger);
 
-        return MessageResource::collection($dynamic->chat->messages()->with(['user', 'media'])->latest()->paginate(10));
+        return MessageResource::collection($dynamic->chat->messages()->with(['user', 'media'])->latest()->paginate(\App\Models\Message::PAGINATION_COUNT));
     }
 
     /**

app/Http/Controllers/PredefinedMutationController.php

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

app/Http/Resources/MutationResource.php

@@ -13,6 +13,13 @@ class MutationResource extends BaseResource
      */
     public function toArray(Request $request): array
     {
-        return parent::toArray($request);
+        $data = 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/Message.php

@@ -14,6 +14,8 @@ class Message extends Model
     /** @use HasFactory<MessageFactory> */
     use HasFactory;
 
+    const PAGINATION_COUNT = 6;
+
     protected $fillable = [
         'chat_id',
         'user_id',

app/Models/PredefinedMutation.php

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

app/Policies/MutationPolicy.php

@@ -24,8 +24,9 @@ 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 $dynamic->participants()->where('user_id', $user->id)->where('role', 'owner')->exists();
+        return $isOwner && $mutation->status === 'pending';
     }
 
     /**
@@ -34,7 +35,8 @@ 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 $dynamic->participants()->where('user_id', $user->id)->where('role', 'owner')->exists();
+        return $isOwner && $mutation->status !== 'voided';
     }
 }

database/migrations/2026_06_16_225928_create_predefined_mutations_table.php

@@ -13,11 +13,10 @@ return new class extends Migration
     {
         Schema::create('predefined_mutations', function (Blueprint $table) {
             $table->id();
-            $table->foreignId('dynamic_id')->constrained()->cascadeOnDelete();
+            $table->foreignId('ledger_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: number;
+    dynamicId: string;
-    ledgerId: number;
+    ledgerId: string;
 }>();
 
 const form = useForm({

resources/js/components/Chat.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-import { useForm, usePage, router } from '@inertiajs/vue3';
+import { usePage } from '@inertiajs/vue3';
 import { useEcho, echoIsConfigured, configureEcho } from '@laravel/echo-vue';
-import { Paperclip, Info } from '@lucide/vue';
+import { ref, computed, watch } from 'vue';
-import { ref, computed } from 'vue';
 import { route } from 'ziggy-js';
+import ChatInput from './chat/ChatInput.vue';
+import ChatSystemMessage from './chat/ChatSystemMessage.vue';
+import ChatUserMessage from './chat/ChatUserMessage.vue';
 
 const props = withDefaults(
     defineProps<{
@@ -33,33 +35,85 @@ const props = withDefaults(
             } | null;
         }>;
         dynamicId: string;
-        initialMessages: {
+        ledgerId?: string | null;
+        initialMessages?: {
             data: Array<any>;
-            next_page_url: string | null;
+            next_page_url?: string | null;
-        };
+            links?: {
+                next: string | null;
+            } | null;
+            current_page?: number;
+            meta?: {
+                current_page: number;
+            } | null;
+        } | null;
     }>(),
     {
         participants: () => [],
+        initialMessages: null,
+        ledgerId: null,
     }
 );
 
-const messages = ref(props.initialMessages.data.reverse());
+const getNextPageUrl = (paginator: any) => {
-const nextPageUrl = ref(props.initialMessages.next_page_url);
+    return paginator?.links?.next ?? paginator?.next_page_url ?? null;
+};
+
+const getCurrentPage = (paginator: any) => {
+    return paginator?.meta?.current_page ?? paginator?.current_page ?? 1;
+};
+
+const messages = ref(
+    props.initialMessages
+        ? props.initialMessages.data.slice().reverse()
+        : (props.chat.messages || []).slice()
+);
+const nextPageUrl = ref(getNextPageUrl(props.initialMessages));
+const currentPageNum = ref(1);
+
+watch(
+    () => props.initialMessages,
+    (newVal) => {
+        if (newVal && getCurrentPage(newVal) === 1) {
+            messages.value = newVal.data.slice().reverse();
+            nextPageUrl.value = getNextPageUrl(newVal);
+            currentPageNum.value = 1;
+        }
+    },
+    { deep: true }
+);
+
+watch(
+    () => props.chat.messages,
+    (newVal) => {
+        if (!props.initialMessages && newVal) {
+            messages.value = newVal.slice();
+        }
+    },
+    { deep: true }
+);
 
 function loadMoreMessages() {
     if (!nextPageUrl.value) {
         return;
     }
 
-    router.get(nextPageUrl.value, {}, {
+    currentPageNum.value++;
-        preserveState: true,
+
-        preserveScroll: true,
+    const apiRouteName = props.ledgerId ? 'dynamics.ledgers.messages' : 'dynamics.messages';
-        only: ['messages'],
+    const apiParams = props.ledgerId ? [props.dynamicId, props.ledgerId] : [props.dynamicId];
-        onSuccess: (page) => {
+    const url = route(apiRouteName, [...apiParams, { page: currentPageNum.value }]);
-            const newMessages = page.props.messages as { data: Array<any>; next_page_url: string | null };
+
-            messages.value = [...newMessages.data.reverse(), ...messages.value];
+    fetch(url)
-            nextPageUrl.value = newMessages.next_page_url;
+        .then((res) => res.json())
-        },
+        .then((json) => {
+            const data = json?.data || [];
+            messages.value = [...data.slice().reverse(), ...messages.value];
+            nextPageUrl.value = getNextPageUrl(json);
+        })
+        .catch((err) => {
+            console.error('Failed to load older messages:', err);
+            currentPageNum.value--;
         });
 }
 
@@ -79,30 +133,10 @@ if (!echoIsConfigured()) {
     });
 }
 
-const fileInput = ref<HTMLInputElement | null>(null);
-
-const form = useForm({
-    content: '',
-    media: [] as File[],
-});
-
 useEcho(`chats.${props.chat.id}`, 'MessageSent', (e: any) => {
     messages.value.push(e.message);
 });
 
-function formatTimestamp(isoString: string): { full: string; time: string } {
-    const date = new Date(isoString);
-
-    return {
-        full: date.toLocaleString(),
-        time: date.toLocaleTimeString([], {
-            hour: '2-digit',
-            minute: '2-digit',
-            hour12: false,
-        }),
-    };
-}
-
 const participantsById = computed(() => {
     const list = props.participants || [];
 
@@ -123,83 +157,6 @@ const participantsById = computed(() => {
     );
 });
 
-function parseMessageContent(message: {
-    content: string;
-    subject_id?: number | null;
-    subject_type?: string | null;
-    subject?: any;
-}) {
-    let content = message.content;
-
-    // 1. Replace <user:id> placeholders with links to their dynamic profile
-    const userRegex = /<user:(\d+)>/g;
-    content = content.replace(userRegex, (match, userId) => {
-        const user = participantsById.value[Number(userId)];
-
-        if (user) {
-            const url = route('dynamics.users.show', [props.dynamicId, Number(userId)]);
-
-            return `<a href="${url}" class="c-chat__user-link font-semibold text-blue-500 hover:underline">${
-                user.pivot?.display_name ?? user.name
-            }</a>`;
-        }
-
-        return `User #${userId}`;
-    });
-
-    // 2. Link subjects if found in the text
-    if (message.subject_id && message.subject_type) {
-        if (
-            message.subject_type === 'App\\Models\\Mutation' ||
-            message.subject_type === 'App\\Models\\Ledger'
-        ) {
-            const ledgerId =
-                message.subject_type === 'App\\Models\\Mutation'
-                    ? message.subject?.ledger_id
-                    : message.subject?.id;
-
-            const ledgerName =
-                message.subject_type === 'App\\Models\\Mutation'
-                    ? message.subject?.ledger?.name
-                    : message.subject?.name;
-
-            if (ledgerId && ledgerName) {
-                const ledgerUrl = route('dynamics.ledgers.show', [
-                    props.dynamicId,
-                    ledgerId,
-                ]);
-
-                const escapedName = ledgerName.replace(
-                    /[-\/\\^$*+?.()|[\]{}]/g,
-                    '\\$&',
-                );
-
-                const nameRegex = new RegExp(`"${escapedName}"`, 'g');
-                content = content.replace(
-                    nameRegex,
-                    `"<a href="${ledgerUrl}" class="c-chat__subject-link font-semibold text-blue-500 hover:underline">${ledgerName}</a>"`,
-                );
-            }
-        }
-    }
-
-    return content;
-}
-
-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]);
-        }
-    }
-}
-
-function removeFile(index: number) {
-    form.media.splice(index, 1);
-}
-
 const currentUser = computed(() => usePage().props.auth?.user);
 
 function isOwnMessage(messageUserId: number | null): boolean {
@@ -210,18 +167,6 @@ function isOwnMessage(messageUserId: number | null): boolean {
     return currentUser.value && currentUser.value.id === messageUserId;
 }
 
-function submit() {
-    form.post(route('chats.messages.store', props.chat.id), {
-        onSuccess: () => {
-            form.reset();
-
-            if (fileInput.value) {
-                fileInput.value.value = '';
-            }
-        },
-    });
-}
-
 // Lightbox Modal state
 const activeLightboxUrl = ref<string | null>(null);
 const activeLightboxType = ref<'image' | 'video' | null>(null);
@@ -261,138 +206,29 @@ function closeLightbox() {
                 ]"
             >
                 <!-- Standard User Chat Message -->
-                <template v-if="message.user">
+                <ChatUserMessage
-                    <div class="c-chat__message-header">
+                    v-if="message.user"
-                        <span class="c-chat__message-author">{{
+                    :message="message"
-                            message.user.name
+                    :participants-by-id="participantsById"
-                        }}</span>
+                    :dynamic-id="dynamicId"
-                        <span
+                    @open-lightbox="openLightbox"
-                            class="c-chat__message-time"
-                            :title="formatTimestamp(message.created_at).full"
-                        >
-                            {{ formatTimestamp(message.created_at).time }}
-                        </span>
-                    </div>
-                    <p class="c-chat__message-text" v-html="parseMessageContent(message)"></p>
-
-                    <!-- Attached Media Display -->
-                    <div
-                        v-if="message.media && message.media.length > 0"
-                        class="c-chat__message-media"
-                    >
-                        <div
-                            v-for="item in message.media"
-                            :key="item.id"
-                            class="c-chat__media-item"
-                        >
-                            <img
-                                v-if="item.mime_type.startsWith('image/')"
-                                :src="item.url"
-                                :alt="item.file_name"
-                                class="c-chat__image cursor-pointer 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="c-chat__video"
-                                ></video>
-                                <div class="c-chat__play-overlay">▶</div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
 
                 <!-- Subtle Activity Log System Message -->
-                <template v-else>
+                <ChatSystemMessage
-                    <div class="c-chat__system-inner">
+                    v-else
-                        <Info class="c-chat__system-icon" />
+                    :message="message"
-                        <span
+                    :participants-by-id="participantsById"
-                            class="c-chat__system-text"
+                    :dynamic-id="dynamicId"
-                            v-html="parseMessageContent(message)"
+                />
-                        ></span>
-                        <span
-                            class="c-chat__system-time"
-                            :title="formatTimestamp(message.created_at).full"
-                        >
-                            {{ formatTimestamp(message.created_at).time }}
-                        </span>
-                    </div>
-                </template>
             </div>
             <div v-if="messages.length === 0" class="c-chat__empty">
                 No messages yet.
             </div>
         </div>
-        <form @submit.prevent="submit" class="c-chat__form">
-            <div class="c-chat__form-group">
-                <label for="content" class="c-chat__label">Message</label>
-                <textarea
-                    v-model="form.content"
-                    id="content"
-                    rows="3"
-                    class="c-chat__textarea"
-                    placeholder="Type a message... (Press Enter to send, Shift+Enter for newline)"
-                    @keydown.enter.exact.prevent="submit"
-                ></textarea>
-                <div v-if="form.errors.content" class="c-chat__error">
-                    {{ form.errors.content }}
-                </div>
 
-                <!-- Attachment Button & Hidden Input -->
+        <!-- Cohesive Chat input Form -->
-                <div class="c-chat__attachment-container">
+        <ChatInput :chat-id="chat.id" />
-                    <button
-                        type="button"
-                        @click="fileInput?.click()"
-                        class="c-chat__attach-btn"
-                    >
-                        <Paperclip class="c-chat__attach-icon" />
-                        Attach Photos/Videos
-                    </button>
-                    <input
-                        ref="fileInput"
-                        type="file"
-                        multiple
-                        accept="image/*,video/*"
-                        class="hidden"
-                        @change="handleFileChange"
-                    />
-                </div>
-
-                <!-- Previews List -->
-                <div v-if="form.media.length > 0" class="c-chat__preview-list">
-                    <div
-                        v-for="(file, index) in form.media"
-                        :key="index"
-                        class="c-chat__preview-item"
-                    >
-                        <span class="c-chat__preview-name">{{
-                            file.name
-                        }}</span>
-                        <button
-                            type="button"
-                            @click="removeFile(index)"
-                            class="c-chat__preview-remove"
-                        >
-                            ✕
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div class="c-chat__submit-box">
-                <button
-                    type="submit"
-                    :disabled="form.processing"
-                    class="c-chat__button"
-                >
-                    Send
-                </button>
-            </div>
-        </form>
 
         <!-- Gorgeous Dark Lightbox Modal -->
         <div v-if="activeLightboxUrl" class="c-lightbox" @click="closeLightbox">
@@ -414,3 +250,183 @@ function closeLightbox() {
         </div>
     </div>
 </template>
+
+<style scoped>
+@reference "../../css/app.css";
+
+.c-chat {
+    @apply flex flex-col h-[500px];
+    background-color: var(--card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+}
+
+.c-chat__title {
+    @apply p-4 font-bold border-b text-sm;
+    border-color: var(--border);
+    color: var(--foreground);
+}
+
+.c-chat__list {
+    @apply flex-1 overflow-y-auto p-4 space-y-4;
+}
+
+.c-chat__load-more {
+    @apply flex justify-center py-2;
+}
+
+.c-chat__load-more-btn {
+    @apply text-xs font-semibold text-blue-500 hover:underline;
+}
+
+.c-chat__message {
+    @apply max-w-[75%] p-3 rounded-lg flex flex-col gap-1;
+}
+
+.c-chat__message--own {
+    @apply self-end;
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-bottom-right-radius: 0;
+
+    .c-chat__message-author {
+        @apply hidden;
+    }
+
+    .c-chat__message-time {
+        @apply text-blue-100;
+    }
+
+    .c-chat__message-text {
+        color: var(--primary-foreground);
+    }
+}
+
+.c-chat__message--other {
+    @apply self-start;
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+    border-bottom-left-radius: 0;
+}
+
+.c-chat__message--system {
+    @apply self-center max-w-full w-full bg-transparent border-0 p-0 text-center gap-0;
+}
+
+.c-chat__message-header {
+    @apply flex items-baseline gap-2 mb-1;
+}
+
+.c-chat__message-author {
+    @apply font-semibold text-xs;
+}
+
+.c-chat__message-time {
+    @apply text-[10px];
+    color: var(--muted-foreground);
+}
+
+.c-chat__message-text {
+    @apply text-sm break-words whitespace-pre-wrap leading-relaxed;
+}
+
+.c-chat__message-media {
+    @apply mt-2 flex flex-wrap gap-2;
+}
+
+.c-chat__media-item {
+    @apply max-w-[120px] overflow-hidden rounded border border-black dark:border-gray-600 bg-black;
+}
+
+.c-chat__image {
+    @apply h-auto max-h-[80px] w-full object-cover;
+}
+
+.c-chat__video {
+    @apply h-auto max-h-[80px] w-full;
+}
+
+.c-chat__play-overlay {
+    @apply absolute inset-0 flex items-center justify-center bg-black/40 text-lg font-bold text-white;
+}
+
+.c-chat__system-inner {
+    @apply inline-flex items-center gap-2 bg-neutral-100 dark:bg-neutral-900/30 px-3 py-1 rounded-full text-xs text-neutral-500 dark:text-neutral-400;
+}
+
+.c-chat__system-icon {
+    @apply size-3.5;
+}
+
+.c-chat__system-text {
+    @apply font-medium leading-relaxed;
+}
+
+.c-chat__system-time {
+    @apply text-[10px] opacity-75 ml-1;
+}
+
+.c-chat__empty {
+    @apply text-center text-xs py-8;
+    color: var(--muted-foreground);
+}
+
+.c-chat__form {
+    @apply p-4 border-t flex flex-col gap-2 bg-neutral-50 dark:bg-neutral-900/10;
+    border-color: var(--border);
+}
+
+.c-chat__form-group {
+    @apply relative flex flex-col gap-1;
+}
+
+.c-chat__label {
+    @apply sr-only;
+}
+
+.c-chat__textarea {
+    @apply w-full rounded border p-2 text-sm resize-none focus:outline-none focus:ring-1 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-800;
+    color: var(--foreground);
+    border-color: var(--border);
+}
+
+.c-chat__error {
+    @apply text-xs text-red-500 mt-1;
+}
+
+.c-chat__attachment-container {
+    @apply flex items-center mt-1;
+}
+
+.c-chat__attach-btn {
+    @apply inline-flex items-center gap-1.5 text-xs text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors;
+}
+
+.c-chat__attach-icon {
+    @apply size-3.5;
+}
+
+.c-chat__preview-list {
+    @apply mt-2 flex flex-wrap gap-2;
+}
+
+.c-chat__preview-item {
+    @apply inline-flex items-center gap-2 bg-neutral-100 dark:bg-neutral-900/50 px-2 py-1 rounded text-xs;
+}
+
+.c-chat__preview-name {
+    @apply max-w-[150px] truncate text-neutral-600 dark:text-neutral-400;
+}
+
+.c-chat__preview-remove {
+    @apply text-neutral-400 hover:text-red-500 transition-colors;
+}
+
+.c-chat__submit-box {
+    @apply flex justify-end mt-1;
+}
+
+.c-chat__button {
+    @apply inline-flex items-center justify-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/components/MutationList.vue

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

resources/js/components/chat/ChatInput.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { Paperclip } from '@lucide/vue';
+import { ref } from 'vue';
+import { route } from 'ziggy-js';
+
+const props = defineProps<{
+    chatId: number;
+}>();
+
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const form = useForm({
+    content: '',
+    media: [] as File[],
+});
+
+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]);
+        }
+    }
+}
+
+function removeFile(index: number) {
+    form.media.splice(index, 1);
+}
+
+function submit() {
+    form.post(route('chats.messages.store', props.chatId), {
+        preserveScroll: true,
+        onSuccess: () => {
+            form.reset();
+
+            if (fileInput.value) {
+                fileInput.value.value = '';
+            }
+        },
+    });
+}
+</script>
+
+<template>
+    <form @submit.prevent="submit" class="c-chat__form">
+        <div class="c-chat__form-group">
+            <label for="content" class="c-chat__label">Message</label>
+            <textarea
+                v-model="form.content"
+                id="content"
+                rows="3"
+                class="c-chat__textarea"
+                placeholder="Type a message... (Press Enter to send, Shift+Enter for newline)"
+                @keydown.enter.exact.prevent="submit"
+            ></textarea>
+            <div v-if="form.errors.content" class="c-chat__error">
+                {{ form.errors.content }}
+            </div>
+
+            <!-- Attachment Button & Hidden Input -->
+            <div class="c-chat__attachment-container">
+                <button
+                    type="button"
+                    @click="fileInput?.click()"
+                    class="c-chat__attach-btn"
+                >
+                    <Paperclip class="c-chat__attach-icon" />
+                    Attach Photos/Videos
+                </button>
+                <input
+                    ref="fileInput"
+                    type="file"
+                    multiple
+                    accept="image/*,video/*"
+                    class="hidden"
+                    @change="handleFileChange"
+                />
+            </div>
+
+            <!-- Previews List -->
+            <div v-if="form.media.length > 0" class="c-chat__preview-list">
+                <div
+                    v-for="(file, index) in form.media"
+                    :key="index"
+                    class="c-chat__preview-item"
+                >
+                    <span class="c-chat__preview-name">{{
+                        file.name
+                    }}</span>
+                    <button
+                        type="button"
+                        @click="removeFile(index)"
+                        class="c-chat__preview-remove"
+                    >
+                        ✕
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="c-chat__submit-box">
+            <button
+                type="submit"
+                :disabled="form.processing"
+                class="c-chat__button"
+            >
+                Send
+            </button>
+        </div>
+    </form>
+</template>

resources/js/components/chat/ChatSystemMessage.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { route } from 'ziggy-js';
+import { Info } from '@lucide/vue';
+
+const props = defineProps<{
+    message: {
+        id: number;
+        content: string;
+        created_at: string;
+        subject_id?: number | null;
+        subject_type?: string | null;
+        subject?: any;
+    };
+    participantsById: Record<
+        number,
+        {
+            id: number;
+            name: string;
+            pivot?: { display_name: string | null } | null;
+        }
+    >;
+    dynamicId: string;
+}>();
+
+function formatTimestamp(isoString: string): { full: string; time: string } {
+    const date = new Date(isoString);
+    return {
+        full: date.toLocaleString(),
+        time: date.toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+        }),
+    };
+}
+
+const parsedContent = computed(() => {
+    let content = props.message.content;
+
+    // 1. Replace <user:id> placeholders with links to their dynamic profile
+    const userRegex = /<user:(\d+)>/g;
+    content = content.replace(userRegex, (match, userId) => {
+        const user = props.participantsById[Number(userId)];
+        if (user) {
+            const url = route('dynamics.users.show', [props.dynamicId, Number(userId)]);
+            return `<a href="${url}" class="c-chat__user-link font-semibold text-blue-500 hover:underline">${
+                user.pivot?.display_name ?? user.name
+            }</a>`;
+        }
+        return `User #${userId}`;
+    });
+
+    // 2. Link subjects if found in the text
+    if (props.message.subject_id && props.message.subject_type) {
+        if (
+            props.message.subject_type === 'mutation' ||
+            props.message.subject_type === 'ledger'
+        ) {
+            const ledgerId =
+                props.message.subject_type === 'mutation'
+                    ? props.message.subject?.ledger_id
+                    : props.message.subject?.id;
+
+            const ledgerName =
+                props.message.subject_type === 'mutation'
+                    ? props.message.subject?.ledger?.name
+                    : props.message.subject?.name;
+
+            if (ledgerId && ledgerName) {
+                const ledgerUrl = route('dynamics.ledgers.show', [
+                    props.dynamicId,
+                    ledgerId,
+                ]);
+
+                const escapedName = ledgerName.replace(
+                    /[-\/\\^$*+?.()|[\]{}]/g,
+                    '\\$&',
+                );
+                
+                const nameRegex = new RegExp(`"${escapedName}"`, 'g');
+                content = content.replace(
+                    nameRegex,
+                    `"<a href="${ledgerUrl}" class="c-chat__subject-link font-semibold text-blue-500 hover:underline">${ledgerName}</a>"`,
+                );
+            }
+        }
+    }
+
+    return content;
+});
+</script>
+
+<template>
+    <div class="c-chat__system-inner">
+        <Info class="c-chat__system-icon" />
+        <span
+            class="c-chat__system-text"
+            v-html="parsedContent"
+        ></span>
+        <span
+            class="c-chat__system-time"
+            :title="formatTimestamp(message.created_at).full"
+        >
+            {{ formatTimestamp(message.created_at).time }}
+        </span>
+    </div>
+</template>

resources/js/components/chat/ChatUserMessage.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { route } from 'ziggy-js';
+
+const props = defineProps<{
+    message: {
+        id: number;
+        user: { id: number; name: string } | null;
+        content: string;
+        created_at: string;
+        subject_id?: number | null;
+        subject_type?: string | null;
+        subject?: any;
+        media?: Array<{
+            id: number;
+            url: string;
+            file_name: string;
+            mime_type: string;
+        }>;
+    };
+    participantsById: Record<
+        number,
+        {
+            id: number;
+            name: string;
+            pivot?: { display_name: string | null } | null;
+        }
+    >;
+    dynamicId: string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'open-lightbox', url: string, mimeType: string): void;
+}>();
+
+function formatTimestamp(isoString: string): { full: string; time: string } {
+    const date = new Date(isoString);
+    return {
+        full: date.toLocaleString(),
+        time: date.toLocaleTimeString([], {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+        }),
+    };
+}
+
+const parsedContent = computed(() => {
+    let content = props.message.content;
+
+    // 1. Replace <user:id> placeholders with links to their dynamic profile
+    const userRegex = /<user:(\d+)>/g;
+    content = content.replace(userRegex, (match, userId) => {
+        const user = props.participantsById[Number(userId)];
+        if (user) {
+            const url = route('dynamics.users.show', [props.dynamicId, Number(userId)]);
+            return `<a href="${url}" class="c-chat__user-link font-semibold text-blue-500 hover:underline">${
+                user.pivot?.display_name ?? user.name
+            }</a>`;
+        }
+        return `User #${userId}`;
+    });
+
+    // 2. Link subjects if found in the text
+    if (props.message.subject_id && props.message.subject_type) {
+        if (
+            props.message.subject_type === 'mutation' ||
+            props.message.subject_type === 'ledger'
+        ) {
+            const ledgerId =
+                props.message.subject_type === 'mutation'
+                    ? props.message.subject?.ledger_id
+                    : props.message.subject?.id;
+
+            const ledgerName =
+                props.message.subject_type === 'mutation'
+                    ? props.message.subject?.ledger?.name
+                    : props.message.subject?.name;
+
+            if (ledgerId && ledgerName) {
+                const ledgerUrl = route('dynamics.ledgers.show', [
+                    props.dynamicId,
+                    ledgerId,
+                ]);
+
+                const escapedName = ledgerName.replace(
+                    /[-\/\\^$*+?.()|[\]{}]/g,
+                    '\\$&',
+                );
+                
+                const nameRegex = new RegExp(`"${escapedName}"`, 'g');
+                content = content.replace(
+                    nameRegex,
+                    `"<a href="${ledgerUrl}" class="c-chat__subject-link font-semibold text-blue-500 hover:underline">${ledgerName}</a>"`,
+                );
+            }
+        }
+    }
+
+    return content;
+});
+</script>
+
+<template>
+    <div>
+        <div class="c-chat__message-header">
+            <span class="c-chat__message-author">{{
+                message.user?.name
+            }}</span>
+            <span
+                class="c-chat__message-time"
+                :title="formatTimestamp(message.created_at).full"
+            >
+                {{ formatTimestamp(message.created_at).time }}
+            </span>
+        </div>
+        <p class="c-chat__message-text" v-html="parsedContent"></p>
+
+        <!-- Attached Media Display -->
+        <div
+            v-if="message.media && message.media.length > 0"
+            class="c-chat__message-media"
+        >
+            <div
+                v-for="item in message.media"
+                :key="item.id"
+                class="c-chat__media-item"
+            >
+                <img
+                    v-if="item.mime_type.startsWith('image/')"
+                    :src="item.url"
+                    :alt="item.file_name"
+                    class="c-chat__image cursor-pointer 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="c-chat__video"
+                    ></video>
+                    <div class="c-chat__play-overlay">▶</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

resources/js/layouts/AppLayout.vue

@@ -2,16 +2,22 @@
 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 { breadcrumbs = [] } = defineProps<{
+const props = defineProps<{
     breadcrumbs?: BreadcrumbItem[];
 }>();
 
+const resolvedBreadcrumbs = computed(() => {
+    return props.breadcrumbs || (usePage().props.breadcrumbs as BreadcrumbItem[]) || [];
+});
+
 const { isSubscribed, subscribe, unsubscribe } = usePushNotifications();
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="breadcrumbs">
+    <AppLayout :breadcrumbs="resolvedBreadcrumbs">
         <slot />
         <div class="fixed bottom-4 right-4">
             <button

resources/js/pages/Dynamics/Create.vue

@@ -2,22 +2,26 @@
 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,6 +2,17 @@
 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;
@@ -9,13 +20,6 @@ defineProps<{
         rules: string;
     }>;
 }>();
-
-const breadcrumbs = [
-    {
-        name: 'Dynamics',
-        href: route('dynamics.index'),
-    },
-];
 </script>
 
 <template>
@@ -110,6 +114,7 @@ const breadcrumbs = [
 
 .c-dynamics-index__item-desc {
     @apply mt-2 text-sm text-gray-600 dark:text-gray-400;
+    white-space: pre-line;
 }
 
 .c-dynamics-index__empty {

resources/js/pages/Dynamics/Invite.vue

@@ -1,7 +1,25 @@
 <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: {
@@ -15,21 +33,6 @@ 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: {
+    layout: (props: any) => ({
         breadcrumbs: [
             {
-                name: 'Dynamics',
+                title: 'Dynamics',
                 href: route('dynamics.index'),
-                isCurrent: false,
             },
             {
-                name: 'dynamic.name',
+                title: props.dynamic.name,
-                href: 'route(\'dynamics.show\', dynamic.id)',
+                href: route('dynamics.show', props.dynamic.id),
-                isCurrent: false,
             },
             {
-                name: 'participant.display_name',
+                title: props.participant.display_name ?? props.participant.name,
-                href: 'route(\'dynamics.users.show\', { dynamic: dynamic.id, user: participant.id })',
+                href: route('dynamics.users.show', [
-                isCurrent: true,
+                    props.dynamic.id,
+                    props.participant.id,
+                ]),
             },
         ],
-    },
+    }),
 });
 
 const props = defineProps<{
@@ -44,21 +44,6 @@ 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>
@@ -67,7 +52,10 @@ const breadcrumbs = [
     <div class="c-participant-show">
         <div class="c-participant-show__container">
             <h2 class="c-participant-show__title">
-                Activity for {{ participant.display_name ?? participant.name }} ({{ participant.role.toUpperCase() }}) in {{ dynamic.name }}
+                Activity for
+                {{ participant.display_name ?? participant.name }} ({{
+                    participant.role.toUpperCase()
+                }}) in {{ dynamic.name }}
             </h2>
 
             <div class="c-participant-show__activity-list">
@@ -76,16 +64,45 @@ const breadcrumbs = [
                     :key="mutation.id"
                     class="c-participant-show__activity-item"
                 >
-                    <Link :href="route('dynamics.ledgers.show', [dynamic.id, mutation.ledger.id])" class="block">
+                    <Link
+                        :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 class="font-semibold ml-2" :class="mutation.amount > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'">
+                            <span
-                                {{ mutation.amount > 0 ? '+' : '' }}{{ mutation.amount }}
+                                class="ml-2 font-semibold"
+                                :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="text-neutral-400 ml-2">on {{ mutation.ledger.name }}</span>
+                            <span class="ml-2 text-neutral-400"
-                            <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'">
+                                >on {{ mutation.ledger.name }}</span
+                            >
+                            <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>
@@ -94,8 +111,12 @@ const breadcrumbs = [
                         </p>
                     </Link>
                 </div>
-                <div v-if="mutations.length === 0" class="text-neutral-500 text-sm">
+                <div
-                    No mutations recorded for this participant in this Dynamic yet.
+                    v-if="mutations.length === 0"
+                    class="text-sm text-neutral-500"
+                >
+                    No mutations recorded for this participant in this Dynamic
+                    yet.
                 </div>
             </div>
         </div>
@@ -135,6 +156,6 @@ const breadcrumbs = [
 }
 
 .c-participant-show__activity-desc {
-    @apply text-sm text-neutral-600 dark:text-neutral-400 mt-1;
+    @apply mt-1 text-sm text-neutral-600 dark:text-neutral-400;
 }
 </style>

resources/js/pages/Dynamics/Settings.vue

@@ -1,7 +1,25 @@
 <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: {
@@ -16,21 +34,6 @@ 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,20 +6,18 @@ import { Head, Link as InertiaLink } from '@inertiajs/vue3';
 import { route } from 'ziggy-js';
 
 defineOptions({
-    layout: {
+    layout: (props: any) => ({
         breadcrumbs: [
             {
-                name: 'Dynamics',
+                title: 'Dynamics',
                 href: route('dynamics.index'),
-                isCurrent: false,
             },
             {
-                name: 'dynamic.name',
+                title: props.dynamic.name,
-                href: 'route(\'dynamics.show\', dynamic.id)',
+                href: route('dynamics.show', props.dynamic.uuid),
-                isCurrent: true,
             },
         ],
-    },
+    }),
 });
 
 const props = defineProps<{
@@ -45,18 +43,6 @@ 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,30 +1,33 @@
 <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,7 +1,29 @@
 <script setup lang="ts">
-import { Head, useForm } from '@inertiajs/vue3';
+import { Head, useForm, Link } 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: {
@@ -20,25 +42,6 @@ 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]));
 }
@@ -47,7 +50,6 @@ function submit() {
 <template>
     <Head title="Edit Ledger" />
 
-    <AppLayout :breadcrumbs="breadcrumbs">
     <div class="c-ledger-edit">
         <div class="c-ledger-edit__container">
             <div class="c-ledger-edit__card">
@@ -85,7 +87,6 @@ function submit() {
             </div>
         </div>
     </div>
-    </AppLayout>
 </template>
 
 <style scoped>

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

@@ -0,0 +1,150 @@
+<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,9 +1,31 @@
 <script setup lang="ts">
-import { Head, useForm } from '@inertiajs/vue3';
+import { Head, useForm, Link as InertiaLink } 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;
@@ -18,6 +40,7 @@ const props = defineProps<{
         name: string;
         description: string;
         amount: number;
+        uuid: string;
     }>;
 }>();
 
@@ -27,36 +50,23 @@ 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" />
 
-    <AppLayout :breadcrumbs="breadcrumbs">
     <div class="c-predefined-mutations">
         <div class="c-predefined-mutations__container">
             <div class="c-predefined-mutations__card">
@@ -79,9 +89,25 @@ function submit() {
                                     {{ mutation.description }}
                                 </p>
                             </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>
@@ -153,7 +179,6 @@ function submit() {
             </div>
         </div>
     </div>
-    </AppLayout>
 </template>
 
 <style scoped>
@@ -203,6 +228,14 @@ function submit() {
     @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;
 }
@@ -223,10 +256,6 @@ function submit() {
     @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,25 +8,22 @@ import Chat from '@/components/Chat.vue';
 import MutationList from '@/components/MutationList.vue';
 
 defineOptions({
-    layout: {
+    layout: (props: any) => ({
         breadcrumbs: [
             {
-                name: 'Dynamics',
+                title: 'Dynamics',
                 href: route('dynamics.index'),
-                isCurrent: false,
             },
             {
-                name: 'dynamic.name',
+                title: props.dynamic.name,
-                href: 'route(\'dynamics.show\', dynamic.id)',
+                href: route('dynamics.show', props.dynamic.id),
-                isCurrent: false,
             },
             {
-                name: 'ledger.name',
+                title: props.ledger.name,
-                href: 'route(\'dynamics.ledgers.show\', { dynamic: dynamic.id, ledger: ledger.id })',
+                href: route('dynamics.ledgers.show', [props.dynamic.id, props.ledger.id]),
-                isCurrent: true,
             },
         ],
-    },
+    }),
 });
 
 const props = defineProps<{
@@ -46,6 +43,7 @@ const props = defineProps<{
         score: number;
         rules: string;
         alignment: string;
+        status: string;
         media?: Array<{ id: number; url: string; mime_type: string }>;
         mutations: Array<{
             id: number;
@@ -59,31 +57,16 @@ const props = defineProps<{
             media?: Array<{ id: number; url: string; mime_type: string }>;
         }>;
     };
-    isOwner: boolean;
+    can: {
+        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);
 const activeLightboxType = ref<'image' | 'video' | null>(null);
@@ -205,7 +188,7 @@ function isOwnerUser(userId: number): boolean {
                                 {{ ledger.rules }}
                             </p>
                         </div>
-                        <div v-if="isOwner" class="flex flex-col gap-2">
+                        <div v-if="can.update" class="flex flex-col gap-2">
                             <InertiaLink
                                 :href="route('dynamics.ledgers.predefined-mutations.index', [dynamic.id, ledger.id])"
                                 class="c-ledger-show__manage-btn"
@@ -287,12 +270,12 @@ function isOwnerUser(userId: number): boolean {
                 :ledger-id="ledger.id"
                 :mutations="ledger.mutations"
                 :participants="dynamic.participants"
-                :is-owner="isOwner"
+                :can-update="can.update"
                 :ledger-alignment="ledger.alignment"
                 @open-lightbox="openLightbox"
             />
 
-            <Chat :chat="dynamic.chat" :initial-messages="messages" :participants="dynamic.participants" :dynamic-id="dynamic.id" />
+            <Chat :chat="dynamic.chat" :initial-messages="messages" :participants="dynamic.participants" :dynamic-id="dynamic.id" :ledger-id="ledger.id" />
         </div>
     </div>
 

resources/js/pages/Participants/Show.vue

@@ -1,260 +0,0 @@
-<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.predefined-mutations', PredefinedMutationController::class)->scoped();
+    Route::resource('dynamics.ledgers.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,16 +1,18 @@
 <?php
 
-use App\Models\Dynamic;
-use App\Models\PredefinedMutation;
 use App\Models\User;
+use App\Models\Dynamic;
+use App\Models\Ledger;
+use App\Models\PredefinedMutation;
 
-test('owner can view predefined mutations for dynamic', function () {
+test('owner can view predefined mutations for ledger', 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([
-        'dynamic_id' => $dynamic->id,
+        'ledger_id' => $ledger->id,
         'name' => 'Weekly Room Cleaning',
         'description' => 'Cleaned up the master bedroom',
         'amount' => 20,
@@ -18,71 +20,147 @@ test('owner can view predefined mutations for dynamic', function () {
 
     $this->actingAs($owner);
 
-    $response = $this->get(route('dynamics.predefined-mutations.index', $dynamic->uuid));
+    $response = $this->get(route('dynamics.ledgers.predefined-mutations.index', [$dynamic->uuid, $ledger->uuid]));
 
     $response->assertOk();
     $response->assertInertia(fn ($page) => $page
-        ->component('Dynamics/PredefinedMutations/Index')
+        ->component('Ledgers/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 dynamic', function () {
+test('non-owner cannot view predefined mutations for ledger', 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.predefined-mutations.index', $dynamic->uuid));
+    $response = $this->get(route('dynamics.ledgers.predefined-mutations.index', [$dynamic->uuid, $ledger->uuid]));
 
     $response->assertStatus(403);
 });
 
-test('owner can create predefined mutations for dynamic', function () {
+test('owner can create predefined mutations for ledger', 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.predefined-mutations.store', $dynamic->uuid), [
+    $response = $this->post(route('dynamics.ledgers.predefined-mutations.store', [$dynamic->uuid, $ledger->uuid]), [
         'name' => 'Polished mirrors',
         'description' => 'Mirror polishing in dungeon',
         'amount' => 15,
-        'type' => 'reward',
     ]);
 
     $response->assertRedirect();
     $this->assertDatabaseHas('predefined_mutations', [
-        'dynamic_id' => $dynamic->id,
+        'ledger_id' => $ledger->id,
         'name' => 'Polished mirrors',
         'amount' => 15,
     ]);
 });
 
-test('non-owner cannot create predefined mutations for dynamic', function () {
+test('non-owner cannot create predefined mutations for ledger', 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.predefined-mutations.store', $dynamic->uuid), [
+    $response = $this->post(route('dynamics.ledgers.predefined-mutations.store', [$dynamic->uuid, $ledger->uuid]), [
         'name' => 'Polished mirrors',
         'description' => 'Mirror polishing in dungeon',
         'amount' => 15,
-        'type' => 'reward',
     ]);
 
     $response->assertStatus(403);
     $this->assertDatabaseMissing('predefined_mutations', [
-        'dynamic_id' => $dynamic->id,
+        'ledger_id' => $ledger->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,
+    ]);
+});