added invitations

resources/js/pages/Dynamics/Show.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3';
-import { route } from 'ziggy-js';
 import Chat from '@/components/Chat.vue';
-import CreateLedgerForm from '@/components/CreateLedgerForm.vue';
-import LedgerList from '@/components/LedgerList.vue';
 import ParticipantsList from '@/components/ParticipantsList.vue';
+import LedgerList from '@/components/LedgerList.vue';
+import CreateLedgerForm from '@/components/CreateLedgerForm.vue';
+import { Head, useForm } from '@inertiajs/vue3';
+import { route } from 'ziggy-js';
 
 const props = defineProps<{
     dynamic: {
@@ -21,6 +21,7 @@ const props = defineProps<{
             media?: Array<{ id: number; url: string; mime_type: string }>;
         }>;
     };
+    isOwner: boolean;
 }>();
 
 const breadcrumbs = [
@@ -33,6 +34,17 @@ const breadcrumbs = [
         href: route('dynamics.show', props.dynamic.id),
     },
 ];
+
+const inviteForm = useForm({
+    email: '',
+    role: 'participant',
+});
+
+function submitInvite() {
+    inviteForm.post(route('dynamics.invitations.store', props.dynamic.id), {
+        onSuccess: () => inviteForm.reset(),
+    });
+}
 </script>
 
 <template>
@@ -60,6 +72,81 @@ const breadcrumbs = [
 
             <!-- Create Ledger Form Component -->
             <CreateLedgerForm :dynamic-id="dynamic.id" />
+
+            <!-- Invite Participant Form (Owners only) -->
+            <div v-if="isOwner" class="c-invite-form">
+                <div class="c-invite-form__card">
+                    <div class="c-invite-form__body">
+                        <h3 class="c-invite-form__title">
+                            Invite User to Dynamic
+                        </h3>
+
+                        <form
+                            @submit.prevent="submitInvite"
+                            class="c-invite-form__form"
+                        >
+                            <div class="c-invite-form__field">
+                                <label
+                                    for="invite_email"
+                                    class="c-invite-form__label"
+                                    >Email Address</label
+                                >
+                                <input
+                                    v-model="inviteForm.email"
+                                    id="invite_email"
+                                    type="email"
+                                    required
+                                    class="c-invite-form__input"
+                                />
+                                <div
+                                    v-if="inviteForm.errors.email"
+                                    class="c-invite-form__error"
+                                >
+                                    {{ inviteForm.errors.email }}
+                                </div>
+                            </div>
+
+                            <div class="c-invite-form__field">
+                                <label
+                                    for="invite_role"
+                                    class="c-invite-form__label"
+                                    >Role</label
+                                >
+                                <select
+                                    v-model="inviteForm.role"
+                                    id="invite_role"
+                                    class="c-invite-form__select"
+                                >
+                                    <option value="owner">
+                                        Owner (Full Access & Approvals)
+                                    </option>
+                                    <option value="participant">
+                                        Participant (Add Suggestions)
+                                    </option>
+                                    <option value="editor">Editor</option>
+                                    <option value="viewer">Viewer</option>
+                                </select>
+                                <div
+                                    v-if="inviteForm.errors.role"
+                                    class="c-invite-form__error"
+                                >
+                                    {{ inviteForm.errors.role }}
+                                </div>
+                            </div>
+
+                            <div class="c-invite-form__actions">
+                                <button
+                                    type="submit"
+                                    :disabled="inviteForm.processing"
+                                    class="c-invite-form__submit-btn"
+                                >
+                                    Send Invitation
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
@@ -92,6 +179,7 @@ const breadcrumbs = [
 }
 
 .c-dynamic-show__rules {
-    @apply mt-2 text-sm text-gray-600 dark:text-gray-400;
+    @apply mt-2 text-sm;
+    color: var(--muted-foreground);
 }
 </style>