further development of the predefinedmutations

resources/js/pages/Dynamics/Settings.vue

@@ -70,12 +70,6 @@ function submit() {
                     </form>
                 </div>
             </div>
-
-            <div class="mt-8">
-                <InertiaLink :href="route('dynamics.predefined-mutations.index', dynamic.id)" class="c-dynamic-settings__submit-btn">
-                    Manage Predefined Mutations
-                </InertiaLink>
-            </div>
         </div>
     </div>
 </template>

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

@@ -9,12 +9,15 @@ const props = defineProps<{
         id: number;
         name: string;
     };
+    ledger: {
+        id: number;
+        name: string;
+    };
     predefined_mutations: Array<{
         id: number;
         name: string;
         description: string;
         amount: number;
-        type: string;
     }>;
 }>();
 
@@ -22,7 +25,6 @@ const form = useForm({
     name: '',
     description: '',
     amount: 0,
-    type: 'reward',
 });
 
 const breadcrumbs = [
@@ -34,14 +36,18 @@ const breadcrumbs = [
         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.predefined-mutations.index', props.dynamic.id),
+        href: route('dynamics.ledgers.predefined-mutations.index', [props.dynamic.id, props.ledger.id]),
     },
 ];
 
 function submit() {
-    form.post(route('dynamics.predefined-mutations.store', props.dynamic.id), {
+    form.post(route('dynamics.ledgers.predefined-mutations.store', [props.dynamic.id, props.ledger.id]), {
         onSuccess: () => form.reset(),
     });
 }
@@ -56,7 +62,7 @@ function submit() {
                 <div class="c-predefined-mutations__card">
                     <div class="c-predefined-mutations__body">
                         <h3 class="c-predefined-mutations__title">
-                            Predefined Mutations for {{ dynamic.name }}
+                            Predefined Mutations for {{ ledger.name }}
                         </h3>
 
                         <div class="c-predefined-mutations__list">
@@ -133,22 +139,6 @@ function submit() {
                                 />
                             </div>
 
-                            <div class="c-predefined-mutations__field">
-                                <label
-                                    for="type"
-                                    class="c-predefined-mutations__label"
-                                    >Type</label
-                                >
-                                <select
-                                    v-model="form.type"
-                                    id="type"
-                                    class="c-predefined-mutations__select"
-                                >
-                                    <option value="reward">Reward</option>
-                                    <option value="penalty">Penalty</option>
-                                </select>
-                            </div>
-
                             <div class="c-predefined-mutations__actions">
                                 <button
                                     type="submit"

resources/js/pages/Ledgers/Show.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
+import { Head, Link as InertiaLink } from '@inertiajs/vue3';
 import { useEcho } from '@laravel/echo-vue';
 import { ref } from 'vue';
 import { route } from 'ziggy-js';
@@ -168,13 +168,25 @@ function isOwnerUser(userId: number): boolean {
         <div class="c-ledger-show__container">
             <div class="c-ledger-show__card">
                 <div class="c-ledger-show__body">
-                    <h3 class="c-ledger-show__title">{{ ledger.name }}</h3>
-                    <p class="c-ledger-show__score">
-                        Score: {{ ledger.score }}
-                    </p>
-                    <p class="c-ledger-show__rules">
-                        {{ ledger.rules }}
-                    </p>
+                    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4">
+                        <div>
+                            <h3 class="c-ledger-show__title">{{ ledger.name }}</h3>
+                            <p class="c-ledger-show__score">
+                                Score: {{ ledger.score }}
+                            </p>
+                            <p class="c-ledger-show__rules">
+                                {{ ledger.rules }}
+                            </p>
+                        </div>
+                        <div v-if="isOwner" class="flex flex-col gap-2">
+                            <InertiaLink
+                                :href="route('dynamics.ledgers.predefined-mutations.index', [dynamic.id, ledger.id])"
+                                class="c-ledger-show__manage-btn"
+                            >
+                                Predefined Mutations
+                            </InertiaLink>
+                        </div>
+                    </div>
 
                     <!-- Ledger Alignment Badge / Subtitle -->
                     <div class="c-ledger-show__alignment-wrapper">
@@ -288,6 +300,10 @@ function isOwnerUser(userId: number): boolean {
     @apply py-12;
 }
 
+.c-ledger-show__manage-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-ledger-show__container {
     @apply mx-auto max-w-7xl sm:px-6 lg:px-8;
 }