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 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 | <template>
<Head :title="`Team: ${props.team.name}`" />
<AppLayout :breadcrumbs="[
{ title: 'Administration', href: '/administration' },
{ title: 'Teams', href: '/administration/teams' },
{ title: props.team.name, href: '#' }
]">
<div class="p-4 space-y-6">
<!-- Header -->
<div class="rounded-lg bg-white border border-gray-200 p-6 shadow-sm">
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold text-gray-900">{{ props.team.name }}</h1>
<p v-if="props.team.description" class="text-sm text-gray-500 mt-1">{{ props.team.description }}</p>
</div>
<div class="flex items-center gap-2">
<Link
:href="`/administration/teams/${props.team.id}/edit`"
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary/90"
>
Edit
</Link>
<button
@click="deleteTeam"
class="rounded-md border border-red-300 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-50"
>
Delete
</button>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Members -->
<div class="lg:col-span-2">
<div class="rounded-lg bg-white border border-gray-200 shadow-sm">
<div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
<h2 class="text-lg font-semibold text-gray-900">Members</h2>
<p class="text-sm text-gray-600">{{ props.team.users_count }} {{ props.team.users_count === 1 ? 'member' : 'members' }}</p>
</div>
<div class="p-6">
<div v-if="props.team.users.length === 0" class="text-center py-8 text-gray-500">
<p>No members assigned to this team yet.</p>
<Link :href="`/administration/teams/${props.team.id}/edit`" class="mt-2 inline-block text-sm font-medium text-blue-600 hover:text-blue-800">
Add Members
</Link>
</div>
<div v-else class="space-y-3">
<div v-for="user in props.team.users" :key="user.id" class="flex items-center gap-3 rounded-lg border px-4 py-3">
<span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary">
{{ user.name.charAt(0).toUpperCase() }}
</span>
<div>
<p class="text-sm font-medium text-gray-900">{{ user.name }}</p>
<p v-if="user.email" class="text-xs text-gray-500">{{ user.email }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Stats Sidebar -->
<div class="space-y-6">
<div class="rounded-lg bg-white border border-gray-200 shadow-sm">
<div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
<h2 class="text-lg font-semibold text-gray-900">Team Info</h2>
</div>
<div class="p-6 space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700">Members</label>
<p class="text-2xl font-bold text-primary">{{ props.team.users_count }}</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Assigned Jobcards</label>
<p class="text-2xl font-bold text-primary">{{ props.team.jobcards_count }}</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Created</label>
<p class="text-sm text-gray-900">{{ formatDate(props.team.created_at) }}</p>
</div>
</div>
</div>
<!-- Recent Jobcards -->
<div v-if="props.team.jobcards && props.team.jobcards.length > 0" class="rounded-lg bg-white border border-gray-200 shadow-sm">
<div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
<h2 class="text-lg font-semibold text-gray-900">Assigned Jobcards</h2>
</div>
<div class="p-6 space-y-3">
<Link
v-for="jobcard in props.team.jobcards.slice(0, 5)"
:key="jobcard.id"
:href="`/jobcards/${jobcard.id}`"
class="block rounded-lg border px-4 py-3 hover:bg-gray-50 transition-colors"
>
<p class="text-sm font-medium text-gray-900">{{ jobcard.job_number }}</p>
<p class="text-xs text-gray-500">{{ jobcard.title }} · {{ jobcard.customer?.name }}</p>
</Link>
</div>
</div>
</div>
</div>
</div>
</AppLayout>
</template>
<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import { Head, Link, router } from '@inertiajs/vue3';
interface AppUser {
id: number;
name: string;
email?: string;
}
interface Jobcard {
id: number;
job_number: string;
title: string;
customer?: { id: number; name: string };
}
interface Team {
id: number;
name: string;
description: string | null;
users: AppUser[];
jobcards: Jobcard[];
users_count: number;
jobcards_count: number;
created_at: string;
}
const props = defineProps<{
team: Team;
}>();
const formatDate = (date: string) => {
if (!date) return '';
return new Date(date).toLocaleDateString();
};
const deleteTeam = () => {
if (confirm(`Are you sure you want to delete team "${props.team.name}"?`)) {
router.delete(`/administration/teams/${props.team.id}`);
}
};
</script>
|