feat(frontend): Add ogranization invitation

legalconsenthub/pages/accept-invitation/[id].vue

@@ -0,0 +1,90 @@
+<template>
+  <UDashboardPanel>
+    <template #header>
+      <UDashboardNavbar title="Accept Invitation" :ui="{ right: 'gap-3' }">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+
+        <template #right />
+      </UDashboardNavbar>
+
+      <UDashboardToolbar>
+        <template #left />
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-4 sm:gap-6 lg:gap-12 w-full lg:max-w-2xl mx-auto">
+        <UPageCard title="Accept Invitation" description="Accept or decline the invitation." class="mb-6">
+          <div v-if="invitation && !error">
+            <div v-if="invitationStatus === 'pending'" class="space-y-4">
+              <p>
+                <strong>{{ invitation.inviterEmail }}</strong> has invited you to join
+                <strong>{{ invitation.organizationName }}</strong
+                >.
+              </p>
+              <p>
+                This invitation was sent to <strong>{{ invitation.email }}</strong
+                >.
+              </p>
+            </div>
+
+            <div v-if="invitationStatus === 'accepted'" class="space-y-4 text-center">
+              <div class="flex items-center justify-center w-16 h-16 mx-auto bg-green-100 rounded-full">
+                <UIcon name="i-lucide-check" class="w-8 h-8 text-green-600" />
+              </div>
+              <h2 class="text-2xl font-bold">Welcome to {{ invitation.organizationName }}!</h2>
+              <p>You've successfully joined the organization. We're excited to have you on board!</p>
+            </div>
+
+            <div v-if="invitationStatus === 'rejected'" class="space-y-4 text-center">
+              <div class="flex items-center justify-center w-16 h-16 mx-auto bg-red-100 rounded-full">
+                <UIcon name="i-lucide-x" class="w-8 h-8 text-red-600" />
+              </div>
+              <h2 class="text-2xl font-bold">Invitation Declined</h2>
+              <p>You've declined the invitation to join {{ invitation.organizationName }}.</p>
+            </div>
+
+            <div v-if="invitationStatus === 'pending'" class="flex justify-between mt-6">
+              <UButton variant="soft" color="neutral" @click="handleReject">Decline</UButton>
+              <UButton color="primary" @click="handleAccept">Accept Invitation</UButton>
+            </div>
+          </div>
+
+          <div v-else-if="!invitation && !error" class="space-y-4">
+            <USkeleton class="w-1/3 h-6" />
+            <USkeleton class="w-full h-4" />
+            <USkeleton class="w-2/3 h-4" />
+            <USkeleton class="w-24 h-10 ml-auto" />
+          </div>
+
+          <div v-else>
+            <p class="text-red-600 font-medium">{{ error }}</p>
+          </div>
+        </UPageCard>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+const invitationId = useRoute().params.id as string
+
+const { acceptInvitation, rejectInvitation, getInvitation } = useBetterAuth()
+const invitation = ref<CustomInvitation>(null)
+const invitationStatus = ref<'pending' | 'accepted' | 'rejected'>('pending')
+const error = ref<string | null>(null)
+
+async function handleAccept() {
+  await acceptInvitation(invitationId)
+}
+
+async function handleReject() {
+  await rejectInvitation(invitationId)
+}
+
+onMounted(async () => {
+  invitation.value = await getInvitation(invitationId)
+})
+</script>