# All files / js/pages/administration/Teams Index.vue

0% Statements 0/24
0% Branches 0/20
0% Functions 0/11
0% Lines 0/24

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
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105

     <template>
        <Head title="Teams" />

        <AppLayout :breadcrumbs="[
            { title: 'Administration', href: '/administration' },
            { title: 'Teams', href: '#' }
        ]">
            <div class="p-4">
                <div class="flex items-center justify-between gap-3 mb-6">
                    <h1 class="text-2xl font-bold text-gray-900">Teams</h1>
                    <Link href="/administration/teams/create" class="rounded bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90 transition-colors">
                        New Team
                    </Link>
                </div>

                <div v-if="props.teams.length === 0" class="bg-white rounded-lg border p-12 text-center">
                    <UsersRound class="mx-auto h-12 w-12 text-gray-400" />
                    <h3 class="mt-4 text-lg font-medium text-gray-900">No teams yet</h3>
                    <p class="mt-2 text-sm text-gray-500">Create a team to organize your users and assign jobcards.</p>
                    <Link href="/administration/teams/create" class="mt-4 inline-block rounded bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90 transition-colors">
                        Create First Team
                    </Link>
                </div>

                <div v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                    <div v-for="team in props.teams" :key="team.id" class="bg-white rounded-lg border shadow-sm hover:shadow-md transition-shadow">
                        <div class="p-6">
                            <div class="flex items-start justify-between">
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-900">{{ team.name }}</h3>
                                    <p v-if="team.description" class="mt-1 text-sm text-gray-500 line-clamp-2">{{ team.description }}</p>
                                </div>
                                <div class="rounded-full bg-primary/10 p-2">
                                    <UsersRound class="h-5 w-5 text-primary" />
                                </div>
                            </div>
                            <div class="mt-4 flex items-center gap-4 text-sm text-gray-600">
                                <span class="flex items-center gap-1">
                                    <UserIcon class="h-4 w-4" />
                                    {{ team.users_count }} {{ team.users_count === 1 ? 'member' : 'members' }}
                                </span>
                                <span class="flex items-center gap-1">
                                    <ClipboardList class="h-4 w-4" />
                                    {{ team.jobcards_count }} {{ team.jobcards_count === 1 ? 'jobcard' : 'jobcards' }}
                                </span>
                            </div>
                        </div>
                        <div class="border-t px-6 py-3 flex flex-wrap items-center gap-2">
                            <Link
                                :href="`/administration/teams/${team.id}`"
                                class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium text-blue-600 hover:bg-blue-50 md:p-0 md:hover:bg-transparent hover:text-blue-800"
                            >
                                <ListTableActionLabel label="View">
                                    <Eye class="h-4 w-4" />
                                </ListTableActionLabel>
                            </Link>
                            <Link
                                :href="`/administration/teams/${team.id}/edit`"
                                class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium text-indigo-600 hover:bg-indigo-50 md:p-0 md:hover:bg-transparent hover:text-indigo-800"
                            >
                                <ListTableActionLabel label="Edit">
                                    <Edit class="h-4 w-4" />
                                </ListTableActionLabel>
                            </Link>
                            <button
                                type="button"
                                @click="deleteTeam(team)"
                                class="inline-flex items-center justify-center rounded-md p-2 text-sm font-medium text-red-600 hover:bg-red-50 md:p-0 md:hover:bg-transparent hover:text-red-800"
                            >
                                <ListTableActionLabel label="Delete">
                                    <Trash2 class="h-4 w-4" />
                                </ListTableActionLabel>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </AppLayout>
    </template>

    <script setup lang="ts">
    import ListTableActionLabel from '@/components/ListTableActionLabel.vue';
    import AppLayout from '@/layouts/AppLayout.vue';
    import { Head, Link, router } from '@inertiajs/vue3';
    import { UsersRound, User as UserIcon, ClipboardList, Eye, Edit, Trash2 } from 'lucide-vue-next';

    interface Team {
        id: number;
        name: string;
        description: string | null;
        users_count: number;
        jobcards_count: number;
    }

    const props = defineProps<{
        teams: Team[];
    }>();

    const deleteTeam = (team: Team) => {
        if (confirm(`Are you sure you want to delete team "${team.name}"?`)) {
            router.delete(`/administration/teams/${team.id}`);
        }
    };
    </script>