add invitations tab to members page

resources/js/Components/Common/Invitation/InvitationTable.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useInvitationsStore } from '@/utils/useInvitations';
+import InvitationTableRow from '@/Components/Common/Invitation/InvitationTableRow.vue';
+import InvitationTableHeading from '@/Components/Common/Invitation/InvitationTableHeading.vue';
+
+const { invitations } = storeToRefs(useInvitationsStore());
+
+onMounted(async () => {
+    await useInvitationsStore().fetchInvitations();
+});
+</script>
+
+<template>
+    <div class="flow-root max-w-[100vw] overflow-x-auto">
+        <div class="inline-block min-w-full align-middle">
+            <div
+                data-testid="client_table"
+                class="grid min-w-full"
+                style="grid-template-columns: 1fr 1fr">
+                <InvitationTableHeading></InvitationTableHeading>
+                <template
+                    v-for="invitation in invitations"
+                    :key="invitation.id">
+                    <InvitationTableRow
+                        :invitation="invitation"></InvitationTableRow>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

resources/js/Components/Common/Invitation/InvitationTableHeading.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import TableHeading from '@/Components/Common/TableHeading.vue';
+</script>
+
+<template>
+    <TableHeading>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">Email</div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">Role</div>
+    </TableHeading>
+</template>
+
+<style scoped></style>

resources/js/Components/Common/Invitation/InvitationTableRow.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Invitation } from '@/utils/api';
+import TableRow from '@/Components/TableRow.vue';
+import { capitalizeFirstLetter } from '../../../utils/format';
+
+defineProps<{
+    invitation: Invitation;
+}>();
+</script>
+
+<template>
+    <TableRow>
+        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+            {{ invitation.email }}
+        </div>
+        <div class="whitespace-nowrap px-3 py-4 text-sm text-muted">
+            {{ capitalizeFirstLetter(invitation.role) }}
+        </div>
+    </TableRow>
+</template>
+
+<style scoped></style>