# All files / js/pages/users Show.vue

0% Statements 0/15
0% Branches 0/21
0% Functions 0/5
0% Lines 0/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72

     <script setup lang="ts">
    import AppLayout from '@/layouts/AppLayout.vue';
    import { Head, Link } from '@inertiajs/vue3';
    import users from '@/routes/users';

    const props = defineProps<{
        user: {
            id: number;
            name: string;
            email: string;
            created_at?: string;
            updated_at?: string;
            groups?: { id: number; name: string }[];
            companies?: { id: number; name: string }[];
        }
    }>();
    </script>

    <template>
        <Head :title="`User • ${props.user.name}`" />

        <AppLayout :breadcrumbs="[{ title: 'Users', href: users.index().url }, { title: props.user.name, href: '#' }]">
            <div class="space-y-6 p-4">
                <div class="flex items-center justify-between">
                    <h1 class="text-xl font-semibold">{{ props.user.name }}</h1>
                    <div class="flex items-center gap-2">
                        <Link :href="users.edit(props.user.id).url" class="rounded border px-3 py-1">Edit</Link>
                        <Link :href="users.index().url" class="rounded border px-3 py-1">Back</Link>
                    </div>
                </div>

                <div class="rounded border p-4">
                    <div class="space-y-2">
                        <div><span class="font-medium">Name:</span> {{ props.user.name }}</div>
                        <div><span class="font-medium">Email:</span> {{ props.user.email }}</div>
                    </div>
                </div>

                <div v-if="props.user.groups && props.user.groups.length > 0" class="rounded border p-4">
                    <div class="mb-2 font-medium">Groups</div>
                    <div class="flex flex-wrap gap-2">
                        <span v-for="group in props.user.groups" :key="group.id"
                              class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            {{ group.name }}
                        </span>
                    </div>
                </div>

                <div v-if="props.user.companies && props.user.companies.length > 0" class="rounded border p-4">
                    <div class="mb-2 font-medium">Company Access</div>
                    <div class="flex flex-wrap gap-2">
                        <span v-for="company in props.user.companies" :key="company.id"
                              class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
                            {{ company.name }}
                        </span>
                    </div>
                </div>
                <div v-else class="rounded border p-4">
                    <div class="mb-2 font-medium">Company Access</div>
                    <p class="text-sm text-gray-600">This user has access to all companies.</p>
                </div>

                <div class="text-sm text-gray-500">
                    <div>Created: {{ props.user.created_at }}</div>
                    <div>Updated: {{ props.user.updated_at }}</div>
                </div>
            </div>
        </AppLayout>
    </template>