add alphabetic sorting to multiselect dropdowns

.github/workflows/build-onpremise.yml

@@ -91,7 +91,7 @@ jobs:
         if: steps.cache-vendor.outputs.cache-hit != 'true' # Skip if cache hit
 
       - name: "Use Node.js"
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
 
@@ -177,7 +177,7 @@ jobs:
       - build
     steps:
       - name: "Download digests"
-        uses: actions/download-artifact@v6
+        uses: actions/download-artifact@v4
         with:
           path: ${{ runner.temp }}/digests
           pattern: digests-*

.github/workflows/build-private.yml

@@ -22,7 +22,7 @@ jobs:
 
     steps:
       - name: "Check out code"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0 # Required for WyriHaximus/github-action-get-previous-tag
 
@@ -68,12 +68,12 @@ jobs:
         run: cat .env
 
       - name: "Use Node.js"
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
 
       - name: "Checkout billing extension"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           repository: solidtime-io/extension-billing
           path: extensions/Billing
@@ -93,7 +93,7 @@ jobs:
         run: cd extensions/Billing && npm ci
 
       - name: "Checkout services extension"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           repository: solidtime-io/extension-services
           path: extensions/Services
@@ -111,7 +111,7 @@ jobs:
         run: cd extensions/Services && npm ci
 
       - name: "Checkout invoicing extension"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           repository: solidtime-io/extension-invoicing
           path: extensions/Invoicing

.github/workflows/build-public.yml

@@ -36,7 +36,7 @@ jobs:
 
     steps:
       - name: "Check out code"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0 # Required for WyriHaximus/github-action-get-previous-tag
 
@@ -92,7 +92,7 @@ jobs:
         if: steps.cache-vendor.outputs.cache-hit != 'true' # Skip if cache hit
 
       - name: "Use Node.js"
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
 
@@ -169,7 +169,7 @@ jobs:
       - build
     steps:
       - name: "Download digests"
-        uses: actions/download-artifact@v6
+        uses: actions/download-artifact@v4
         with:
           path: ${{ runner.temp }}/digests
           pattern: digests-*

.github/workflows/generate-api-docs.yml

@@ -29,7 +29,7 @@ jobs:
 
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: "Setup PHP"
         uses: shivammathur/setup-php@v2

.github/workflows/npm-build.yml

@@ -11,7 +11,7 @@ jobs:
 
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: "Setup PHP (for Ziggy)"
         uses: shivammathur/setup-php@v2
@@ -24,7 +24,7 @@ jobs:
         run: composer install -n --prefer-dist
 
       - name: "Use Node.js"
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
 

.github/workflows/npm-format-check.yml

@@ -9,10 +9,10 @@ jobs:
 
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: "Use Node.js"
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
 

.github/workflows/npm-lint.yml

@@ -11,10 +11,10 @@ jobs:
 
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: "Use Node.js"
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
 

.github/workflows/npm-publish-api.yml

@@ -11,11 +11,11 @@ jobs:
       id-token: write
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
       # Setup .npmrc file to publish to npm
       - name: Install root project dependencies
         run: npm ci
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/npm-publish-ui.yml

@@ -11,9 +11,9 @@ jobs:
       id-token: write
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
       # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'

.github/workflows/npm-typecheck.yml

@@ -10,7 +10,7 @@ jobs:
 
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: "Setup PHP (for Ziggy)"
         uses: shivammathur/setup-php@v2
@@ -23,7 +23,7 @@ jobs:
         run: composer install -n --prefer-dist
 
       - name: "Use Node.js"
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
 

.github/workflows/phpstan.yml

@@ -9,7 +9,7 @@ jobs:
 
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: "Setup PHP"
         uses: shivammathur/setup-php@v2

.github/workflows/phpunit.yml

@@ -36,7 +36,7 @@ jobs:
           --health-retries 5
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: "Setup PHP"
         uses: shivammathur/setup-php@v2
@@ -48,7 +48,7 @@ jobs:
       - name: "Run composer install"
         run: composer install -n --prefer-dist
 
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v4
         with:
           node-version: '20.x'
 
@@ -68,7 +68,7 @@ jobs:
         run: php artisan test --stop-on-failure --coverage-text --coverage-clover=coverage.xml
 
       - name: "Upload coverage reports to Codecov"
-        uses: codecov/codecov-action@v5.5.1
+        uses: codecov/codecov-action@v5.4.3
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           slug: solidtime-io/solidtime

.github/workflows/pint.yml

@@ -9,9 +9,9 @@ jobs:
 
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: "Check code style"
-        uses: aglipanci/laravel-pint-action@2.6
+        uses: aglipanci/laravel-pint-action@2.5
         with:
           configPath: "pint.json"

.github/workflows/playwright.yml

@@ -35,10 +35,10 @@ jobs:
 
     steps:
       - name: "Checkout code"
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
 
       - name: "Setup node"
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
 

SECURITY.md

@@ -3,18 +3,3 @@
 ## Reporting a Vulnerability
 
 If you discover a security vulnerability regarding this project, please e-mail me to [security@solidtime.io](mailto:security@solidtime.io)!
-
-## Out of scope
-
-
-Reports we typically won't issue an advisory for:
-
-* Theoretical findings without a working PoC
-* Raw scanner output without manual validation
-* Missing/weak security headers in isolation (CSP, X-Frame-Options, HSTS, etc.)
-* SPF/DKIM/DMARC on non-mail-sending domains; missing DNSSEC/CAA; TLS cipher preferences
-* Self-XSS; CSRF on non-state-changing endpoints (logout, theme)
-* CSV / spreadsheet formula injection in exports — treated as a spreadsheet-application issue
-* Org owners or admins acting destructively within their own organization
-* Anything requiring direct DB, shell, or filesystem access on a self-hosted instance
-* Missing OAuth Scope enforcement (this is not implemented yet, but AI scanners flag it which is why it is included in this list until we actually support it)

app/Providers/JetstreamServiceProvider.php

@@ -304,8 +304,28 @@ class JetstreamServiceProvider extends ServiceProvider
                             'owner' => [
                                 'id' => $owner->getKey(),
                                 'name' => $owner->name,
+                                'email' => $owner->email,
                                 'profile_photo_url' => $owner->profile_photo_url,
                             ],
+                            'users' => $teamModel->users->map(function (User $user): array {
+                                return [
+                                    'id' => $user->getKey(),
+                                    'name' => $user->name,
+                                    'email' => $user->email,
+                                    'profile_photo_url' => $user->profile_photo_url,
+                                    'membership' => [
+                                        'id' => $user->membership->id,
+                                        'role' => $user->membership->role,
+                                    ],
+                                ];
+                            }),
+                            'team_invitations' => $teamModel->teamInvitations->map(function (OrganizationInvitation $invitation): array {
+                                return [
+                                    'id' => $invitation->getKey(),
+                                    'email' => $invitation->email,
+                                    'role' => $invitation->role,
+                                ];
+                            }),
                         ],
                         'currencies' => array_map(function (Currency $currency): string {
                             return $currency->getName();

package.json

@@ -19,26 +19,26 @@
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3.2.0",
-        "@eslint/js": "^10.0.1",
+        "@eslint/js": "^9.19.0",
-        "@inertiajs/vue3": "^3.2.0",
+        "@inertiajs/vue3": "^2.0.0",
         "@playwright/test": "^1.41.1",
         "@tailwindcss/forms": "^0.5.9",
         "@tailwindcss/typography": "^0.5.15",
         "@types/chroma-js": "^3.1.0",
-        "@types/node": "^25.9.1",
+        "@types/node": "^22.10.10",
         "@vitejs/plugin-vue": "^6.0.3",
         "@vue/tsconfig": "^0.8.0",
         "autoprefixer": "^10.4.20",
         "axios": "^1.6.4",
         "eslint-plugin-unused-imports": "^4.1.4",
-        "laravel-vite-plugin": "^3.1.0",
+        "laravel-vite-plugin": "^2.1.0",
         "openapi-zod-client": "^1.16.2",
         "postcss": "^8.4.47",
-        "postcss-import": "^16.1.1",
+        "postcss-import": "^15.1.0",
-        "postcss-nesting": "^14.0.0",
+        "postcss-nesting": "^12.1.5",
-        "tailwindcss": "^4.3.0",
+        "tailwindcss": "^3.4.13",
-        "typescript": "^6.0.3",
+        "typescript": "^5.7.3",
-        "vite": "^8.0.14",
+        "vite": "^7.0.0",
         "vite-plugin-checker": "^0.12.0",
         "vue": "^3.5.0",
         "vue-tsc": "^3.0.0"
@@ -51,7 +51,7 @@
         "@tailwindcss/container-queries": "^0.1.1",
         "@tanstack/vue-form": "^1.3.1",
         "@tanstack/vue-query": "^5.56.2",
-        "@tanstack/vue-query-devtools": "^6.1.33",
+        "@tanstack/vue-query-devtools": "^5.58.0",
         "@tanstack/vue-table": "^8.21.2",
         "@vue/eslint-config-prettier": "^10.2.0",
         "@vue/eslint-config-typescript": "^14.3.0",
@@ -64,12 +64,12 @@
         "dayjs": "^1.11.11",
         "echarts": "^6.0.0",
         "focus-trap": "^8.0.0",
-        "lucide-vue-next": "^1.0.0",
+        "lucide-vue-next": "^0.487.0",
         "parse-duration": "^2.0.1",
         "pinia": "^3.0.0",
         "radix-vue": "^1.9.6",
         "reka-ui": "^2.8.2",
-        "tailwind-merge": "^3.6.0",
+        "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
         "vue-echarts": "^8.0.0",
         "zod": "^3.23.8"

resources/js/Pages/Teams/Partials/TeamMemberManager.vue

@@ -0,0 +1,448 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { router, useForm, usePage } from '@inertiajs/vue3';
+import ActionMessage from '@/Components/ActionMessage.vue';
+import ActionSection from '@/Components/ActionSection.vue';
+import ConfirmationModal from '@/Components/ConfirmationModal.vue';
+import DangerButton from '@/packages/ui/src/Buttons/DangerButton.vue';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
+import FormSection from '@/Components/FormSection.vue';
+import { Field, FieldLabel, FieldError } from '@/packages/ui/src/field';
+
+import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import SectionBorder from '@/Components/SectionBorder.vue';
+import TextInput from '@/packages/ui/src/Input/TextInput.vue';
+import type { Organization, OrganizationInvitation, User } from '@/types/models';
+import type { Membership, Permissions, Role } from '@/types/jetstream';
+import { filterRoles } from '@/utils/roles';
+
+type UserWithMembership = User & { membership: Membership };
+
+const props = defineProps<{
+    team: Organization;
+    availableRoles: Role[];
+    userPermissions: Permissions;
+}>();
+
+const users = computed(() => {
+    return props.team.users as Array<UserWithMembership>;
+});
+
+const page = usePage<{
+    auth: {
+        user: User;
+    };
+}>();
+
+const addTeamMemberForm = useForm({
+    email: '',
+    role: null as string | null,
+});
+
+const updateRoleForm = useForm({
+    role: null as string | null,
+});
+
+const leaveTeamForm = useForm({});
+const removeTeamMemberForm = useForm({});
+
+const currentlyManagingRole = ref(false);
+const managingRoleFor = ref<User | null>(null);
+const confirmingLeavingTeam = ref(false);
+const teamMemberBeingRemoved = ref<User | null>(null);
+
+const addTeamMember = () => {
+    addTeamMemberForm.post(route('team-members.store', props.team.id), {
+        errorBag: 'addTeamMember',
+        preserveScroll: true,
+        onSuccess: () => addTeamMemberForm.reset(),
+    });
+};
+
+const cancelTeamInvitation = (invitation: OrganizationInvitation) => {
+    router.delete(route('team-invitations.destroy', invitation.id), {
+        preserveScroll: true,
+    });
+};
+
+const manageRole = (teamMember: User & { membership: Membership }) => {
+    managingRoleFor.value = teamMember;
+    updateRoleForm.role = teamMember.membership.role;
+    currentlyManagingRole.value = true;
+};
+
+const updateRole = () => {
+    updateRoleForm.put(
+        route('team-members.update', {
+            team: props.team.id,
+            user: managingRoleFor.value?.id,
+        }),
+        {
+            preserveScroll: true,
+            onSuccess: () => (currentlyManagingRole.value = false),
+        }
+    );
+};
+
+const confirmLeavingTeam = () => {
+    confirmingLeavingTeam.value = true;
+};
+
+const leaveTeam = () => {
+    leaveTeamForm.delete(route('team-members.destroy', [props.team.id, page.props.auth.user.id]));
+};
+
+const confirmTeamMemberRemoval = (teamMember: User) => {
+    teamMemberBeingRemoved.value = teamMember;
+};
+
+const removeTeamMember = () => {
+    removeTeamMemberForm.delete(
+        route('team-members.destroy', {
+            team: props.team.id,
+            user: teamMemberBeingRemoved.value?.id,
+        }),
+        {
+            errorBag: 'removeTeamMember',
+            preserveScroll: true,
+            preserveState: true,
+            onSuccess: () => (teamMemberBeingRemoved.value = null),
+        }
+    );
+};
+
+const displayableRole = (role: string) => {
+    return props.availableRoles.find((r) => r.key === role)?.name;
+};
+</script>
+
+<template>
+    <div>
+        <div v-if="userPermissions.canAddTeamMembers">
+            <SectionBorder />
+
+            <!-- Add Organization Member -->
+            <FormSection @submitted="addTeamMember">
+                <template #title> Add Organization Member</template>
+
+                <template #description>
+                    Add a new member to your organization, allowing them to collaborate with you.
+                </template>
+
+                <template #form>
+                    <div class="col-span-6">
+                        <div class="max-w-xl text-sm text-muted">
+                            Please provide the email address of the person you would like to add to
+                            this organization.
+                        </div>
+                    </div>
+
+                    <!-- Member Email -->
+                    <Field class="col-span-6 sm:col-span-4">
+                        <FieldLabel for="email">Email</FieldLabel>
+                        <TextInput
+                            id="email"
+                            v-model="addTeamMemberForm.email"
+                            type="email"
+                            class="block w-full" />
+                        <FieldError v-if="addTeamMemberForm.errors.email">{{
+                            addTeamMemberForm.errors.email
+                        }}</FieldError>
+                    </Field>
+
+                    <!-- Role -->
+                    <div v-if="availableRoles.length > 0" class="col-span-6 lg:col-span-4">
+                        <FieldLabel for="roles">Role</FieldLabel>
+                        <FieldError v-if="addTeamMemberForm.errors.role">{{
+                            addTeamMemberForm.errors.role
+                        }}</FieldError>
+
+                        <div
+                            class="relative z-0 mt-1 border border-card-border rounded-lg cursor-pointer">
+                            <button
+                                v-for="(role, i) in filterRoles(availableRoles)"
+                                :key="role.key"
+                                type="button"
+                                class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
+                                :class="{
+                                    'border-t border-card-border focus:border-none rounded-t-none':
+                                        i > 0,
+                                    'rounded-b-none': i != Object.keys(availableRoles).length - 1,
+                                }"
+                                @click="addTeamMemberForm.role = role.key">
+                                <div
+                                    :class="{
+                                        'opacity-50':
+                                            addTeamMemberForm.role &&
+                                            addTeamMemberForm.role != role.key,
+                                    }">
+                                    <!-- Role Name -->
+                                    <div class="flex items-center">
+                                        <div
+                                            class="text-sm text-text-primary"
+                                            :class="{
+                                                'font-semibold': addTeamMemberForm.role == role.key,
+                                            }">
+                                            {{ role.name }}
+                                        </div>
+
+                                        <svg
+                                            v-if="addTeamMemberForm.role == role.key"
+                                            class="ms-2 h-5 w-5 text-green-400"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            fill="none"
+                                            viewBox="0 0 24 24"
+                                            stroke-width="1.5"
+                                            stroke="currentColor">
+                                            <path
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                        </svg>
+                                    </div>
+
+                                    <!-- Role Description -->
+                                    <div class="mt-2 text-xs text-muted text-start">
+                                        {{ role.description }}
+                                    </div>
+                                </div>
+                            </button>
+                        </div>
+                    </div>
+                </template>
+
+                <template #actions>
+                    <ActionMessage :on="addTeamMemberForm.recentlySuccessful" class="me-3">
+                        Added.
+                    </ActionMessage>
+
+                    <PrimaryButton
+                        :class="{ 'opacity-25': addTeamMemberForm.processing }"
+                        :disabled="addTeamMemberForm.processing">
+                        Add
+                    </PrimaryButton>
+                </template>
+            </FormSection>
+        </div>
+
+        <div v-if="team.team_invitations.length > 0 && userPermissions.canAddTeamMembers">
+            <SectionBorder />
+
+            <!-- Organization Member Invitations -->
+            <ActionSection class="mt-10 sm:mt-0">
+                <template #title> Pending Organization Invitations</template>
+
+                <template #description>
+                    These people have been invited to your organization and have been sent an
+                    invitation email. They may join the organization by accepting the email
+                    invitation.
+                </template>
+
+                <!-- Pending Organization Member Invitation List -->
+                <template #content>
+                    <div class="space-y-6">
+                        <div
+                            v-for="invitation in team.team_invitations"
+                            :key="invitation.id"
+                            class="flex items-center justify-between">
+                            <div class="text-muted">
+                                {{ invitation.email }}
+                            </div>
+
+                            <div class="flex items-center">
+                                <!-- Cancel Organization Invitation -->
+                                <button
+                                    v-if="userPermissions.canRemoveTeamMembers"
+                                    class="cursor-pointer ms-6 text-sm text-red-500 focus:outline-none"
+                                    @click="cancelTeamInvitation(invitation)">
+                                    Cancel
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </ActionSection>
+        </div>
+
+        <div v-if="users.length > 0">
+            <SectionBorder />
+
+            <!-- Manage Organization Members -->
+            <ActionSection class="mt-10 sm:mt-0">
+                <template #title> Organization Members</template>
+
+                <template #description>
+                    All of the people that are part of this organization.
+                </template>
+
+                <!-- Organization Member List -->
+                <template #content>
+                    <div class="space-y-6">
+                        <div
+                            v-for="user in users"
+                            :key="user.id"
+                            class="flex items-center justify-between">
+                            <div class="flex items-center">
+                                <img
+                                    class="w-8 h-8 rounded-full object-cover"
+                                    :src="user.profile_photo_url"
+                                    :alt="user.name" />
+                                <div class="ms-4 text-text-primary">
+                                    {{ user.name }}
+                                </div>
+                            </div>
+
+                            <div class="flex items-center">
+                                <!-- Manage Organization Member Role -->
+                                <button
+                                    v-if="
+                                        userPermissions.canUpdateTeamMembers &&
+                                        availableRoles.length
+                                    "
+                                    class="ms-2 text-sm text-gray-400 underline"
+                                    @click="manageRole(user)">
+                                    {{ displayableRole(user.membership.role) }}
+                                </button>
+
+                                <div
+                                    v-else-if="availableRoles.length"
+                                    class="ms-2 text-sm text-gray-400">
+                                    {{ displayableRole(user.membership.role) }}
+                                </div>
+
+                                <!-- Leave Organization -->
+                                <button
+                                    v-if="page.props.auth.user.id === user.id"
+                                    class="cursor-pointer ms-6 text-sm text-red-500"
+                                    @click="confirmLeavingTeam">
+                                    Leave
+                                </button>
+
+                                <!-- Remove Organization Member -->
+                                <button
+                                    v-else-if="userPermissions.canRemoveTeamMembers"
+                                    class="cursor-pointer ms-6 text-sm text-red-500"
+                                    @click="confirmTeamMemberRemoval(user)">
+                                    Remove
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </ActionSection>
+        </div>
+
+        <!-- Role Management Modal -->
+        <DialogModal :show="currentlyManagingRole" @close="currentlyManagingRole = false">
+            <template #title> Manage Role</template>
+
+            <template #content>
+                <div v-if="managingRoleFor">
+                    <div
+                        class="relative z-0 mt-1 border border-card-border rounded-lg cursor-pointer">
+                        <button
+                            v-for="(role, i) in availableRoles"
+                            :key="role.key"
+                            type="button"
+                            class="relative px-4 py-3 inline-flex w-full rounded-lg focus:z-10 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
+                            :class="{
+                                'border-t border-card-border focus:border-none rounded-t-none':
+                                    i > 0,
+                                'rounded-b-none': i !== Object.keys(availableRoles).length - 1,
+                            }"
+                            @click="updateRoleForm.role = role.key">
+                            <div
+                                :class="{
+                                    'opacity-50':
+                                        updateRoleForm.role && updateRoleForm.role !== role.key,
+                                }">
+                                <!-- Role Name -->
+                                <div class="flex items-center">
+                                    <div
+                                        class="text-sm text-muted"
+                                        :class="{
+                                            'font-semibold': updateRoleForm.role === role.key,
+                                        }">
+                                        {{ role.name }}
+                                    </div>
+
+                                    <svg
+                                        v-if="updateRoleForm.role == role.key"
+                                        class="ms-2 h-5 w-5 text-green-400"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                        stroke-width="1.5"
+                                        stroke="currentColor">
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                    </svg>
+                                </div>
+
+                                <!-- Role Description -->
+                                <div class="mt-2 text-xs text-muted">
+                                    {{ role.description }}
+                                </div>
+                            </div>
+                        </button>
+                    </div>
+                </div>
+            </template>
+
+            <template #footer>
+                <SecondaryButton @click="currentlyManagingRole = false"> Cancel </SecondaryButton>
+
+                <PrimaryButton
+                    class="ms-3"
+                    :class="{ 'opacity-25': updateRoleForm.processing }"
+                    :disabled="updateRoleForm.processing"
+                    @click="updateRole">
+                    Save
+                </PrimaryButton>
+            </template>
+        </DialogModal>
+
+        <!-- Leave Organization Confirmation Modal -->
+        <ConfirmationModal :show="confirmingLeavingTeam" @close="confirmingLeavingTeam = false">
+            <template #title> Leave Organization</template>
+
+            <template #content> Are you sure you would like to leave this organization? </template>
+
+            <template #footer>
+                <SecondaryButton @click="confirmingLeavingTeam = false"> Cancel </SecondaryButton>
+
+                <DangerButton
+                    class="ms-3"
+                    :class="{ 'opacity-25': leaveTeamForm.processing }"
+                    :disabled="leaveTeamForm.processing"
+                    @click="leaveTeam">
+                    Leave
+                </DangerButton>
+            </template>
+        </ConfirmationModal>
+
+        <!-- Remove Organization Member Confirmation Modal -->
+        <ConfirmationModal :show="!!teamMemberBeingRemoved" @close="teamMemberBeingRemoved = null">
+            <template #title> Remove Organization Member</template>
+
+            <template #content>
+                Are you sure you would like to remove this person from the organization?
+            </template>
+
+            <template #footer>
+                <SecondaryButton @click="teamMemberBeingRemoved = null"> Cancel </SecondaryButton>
+
+                <DangerButton
+                    class="ms-3"
+                    :class="{ 'opacity-25': removeTeamMemberForm.processing }"
+                    :disabled="removeTeamMemberForm.processing"
+                    @click="removeTeamMember">
+                    Remove
+                </DangerButton>
+            </template>
+        </ConfirmationModal>
+    </div>
+</template>

resources/js/Pages/Teams/Partials/UpdateTeamNameForm.vue

@@ -51,6 +51,9 @@ const updateTeamName = () => {
                             <div class="text-text-primary">
                                 {{ team.owner.name }}
                             </div>
+                            <div class="text-text-secondary text-sm">
+                                {{ team.owner.email }}
+                            </div>
                         </div>
                     </div>
                 </div>

resources/js/packages/api/package.json

@@ -28,7 +28,7 @@
     "author": "solidtime",
     "license": "AGPL-3.0",
     "devDependencies": {
-        "vite-plugin-dts": "^5.0.1"
+        "vite-plugin-dts": "^4.0.3"
     },
     "peerDependencies": {
         "@zodios/core": "^10.9.6",

resources/js/packages/ui/package.json

@@ -50,7 +50,7 @@
     "devDependencies": {
         "@types/chroma-js": "^3.1.0",
         "@zodios/core": "^10.9.6",
-        "vite-plugin-dts": "^5.0.1",
+        "vite-plugin-dts": "^4.0.3",
         "zod": "^3.23.8"
     },
     "peerDependencies": {

resources/js/types/models.d.ts

@@ -22,7 +22,9 @@ export interface Organization {
     currency: string;
     created_at: string | null;
     updated_at: string | null;
-    owner: Pick<User, 'id' | 'name' | 'profile_photo_url'>;
+    owner: User;
+    users: User[];
+    team_invitations: OrganizationInvitation[];
 }
 export interface OrganizationInvitation {
     id: string;

resources/js/types/models.ts

@@ -29,7 +29,9 @@ export interface Organization {
     created_at: string | null;
     updated_at: string | null;
     // relations
-    owner: Pick<User, 'id' | 'name' | 'profile_photo_url'>;
+    owner: User;
+    users: User[];
+    team_invitations: OrganizationInvitation[];
 }
 
 export interface OrganizationInvitation {

tests/Unit/Endpoint/Web/TeamShowEndpointTest.php

@@ -1,45 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Tests\Unit\Endpoint\Web;
-
-use App\Models\OrganizationInvitation;
-use App\Providers\JetstreamServiceProvider;
-use Inertia\Testing\AssertableInertia as Assert;
-use Laravel\Jetstream\Jetstream;
-use PHPUnit\Framework\Attributes\CoversClass;
-
-#[CoversClass(JetstreamServiceProvider::class)]
-class TeamShowEndpointTest extends EndpointTestAbstract
-{
-    protected function setUp(): void
-    {
-        Jetstream::$inertiaManager = null;
-        parent::setUp();
-    }
-
-    public function test_team_show_does_not_expose_member_roster_invitations_or_owner_email(): void
-    {
-        // Arrange
-        $data = $this->createUserWithPermission([]);
-        OrganizationInvitation::factory()->forOrganization($data->organization)->create([
-            'email' => 'pending@example.com',
-        ]);
-        $this->actingAs($data->user);
-
-        // Act
-        $response = $this->get('/teams/'.$data->organization->getKey());
-
-        // Assert
-        $response->assertOk();
-        $response->assertInertia(fn (Assert $page) => $page
-            ->missing('team.users')
-            ->missing('team.team_invitations')
-            ->missing('team.owner.email')
-            ->has('team.owner.id')
-            ->has('team.owner.name')
-            ->has('team.owner.profile_photo_url')
-        );
-    }
-}