208 lines
8.9 KiB
HTML
208 lines
8.9 KiB
HTML
|
{{ define "content" }}
|
||
|
|
<div class="flex-1 flex flex-col overflow-hidden ">
|
||
|
|
<!-- Main Content -->
|
||
|
|
<div class="flex-1 p-4 md:p-6 overflow-auto">
|
||
|
|
<div class="space-y-6">
|
||
|
|
{{ range .TeamLeads }}
|
||
|
|
{{ $teamLeadID := .ID }}
|
||
|
|
<!-- Team Lead Card -->
|
||
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||
|
|
<!-- Team Lead Header -->
|
||
|
|
<div class="bg-gray-50 border-b border-gray-200 px-6 py-4">
|
||
|
|
<div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
|
||
|
|
<!-- Team Lead Info -->
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
|
||
|
|
<i class="fas fa-user-tie text-white"></i>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 class="text-lg font-semibold text-gray-900">{{ .Name }}</h3>
|
||
|
|
<p class="text-sm text-gray-600">
|
||
|
|
{{ if .Volunteers }}
|
||
|
|
{{ len .Volunteers }} volunteer{{ if ne (len .Volunteers) 1 }}s{{ end }} assigned
|
||
|
|
{{ else }}
|
||
|
|
No volunteers assigned
|
||
|
|
{{ end }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Add Volunteer Form -->
|
||
|
|
{{ if $.UnassignedVolunteers }}
|
||
|
|
<form action="/team_builder" method="POST" class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 w-full lg:w-auto">
|
||
|
|
<input type="hidden" name="team_lead_id" value="{{ .ID }}" />
|
||
|
|
<select
|
||
|
|
name="volunteer_id"
|
||
|
|
class="px-4 py-2 text-sm border border-gray-300 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-w-0 flex-1 sm:w-64"
|
||
|
|
required
|
||
|
|
>
|
||
|
|
<option value="">Select volunteer to assign</option>
|
||
|
|
{{ range $.UnassignedVolunteers }}
|
||
|
|
<option value="{{ .ID }}">{{ .Name }}</option>
|
||
|
|
{{ end }}
|
||
|
|
</select>
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
class="flex items-center justify-center px-4 py-2 bg-blue-500 text-white text-sm hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium rounded-lg transition-colors whitespace-nowrap"
|
||
|
|
>
|
||
|
|
<i class="fas fa-plus mr-2"></i> Add Volunteer
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
{{ else }}
|
||
|
|
<div class="text-sm text-gray-500 bg-gray-100 px-4 py-2 rounded-lg">
|
||
|
|
<i class="fas fa-info-circle mr-2"></i>
|
||
|
|
All volunteers have been assigned
|
||
|
|
</div>
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Desktop Volunteer List -->
|
||
|
|
<div class="hidden md:block">
|
||
|
|
{{ if .Volunteers }}
|
||
|
|
<div class="overflow-x-auto">
|
||
|
|
<table class="w-full">
|
||
|
|
<thead class="bg-gray-50 border-b border-gray-200">
|
||
|
|
<tr>
|
||
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
|
|
Volunteer
|
||
|
|
</th>
|
||
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
|
|
Status
|
||
|
|
</th>
|
||
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||
|
|
Actions
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody class="bg-white divide-y divide-gray-100">
|
||
|
|
{{ range .Volunteers }}
|
||
|
|
<tr class="hover:bg-gray-50">
|
||
|
|
<td class="px-6 py-4">
|
||
|
|
<div class="flex items-center space-x-3">
|
||
|
|
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center">
|
||
|
|
<i class="fas fa-user text-gray-500 text-sm"></i>
|
||
|
|
</div>
|
||
|
|
<div class="text-sm font-medium text-gray-900">{{ .Name }}</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4">
|
||
|
|
<span class="inline-flex items-center px-2 py-1 text-xs font-medium bg-green-100 text-green-700 rounded-full">
|
||
|
|
<i class="fas fa-check mr-1"></i> Assigned
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-6 py-4">
|
||
|
|
<form action="/team_builder/remove_volunteer" method="POST" class="inline-block">
|
||
|
|
<input type="hidden" name="team_lead_id" value="{{ $teamLeadID }}" />
|
||
|
|
<input type="hidden" name="volunteer_id" value="{{ .ID }}" />
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
class="text-red-400 hover:text-red-600 p-1"
|
||
|
|
title="Remove {{ .Name }} from team"
|
||
|
|
onclick="return confirm('Remove {{ .Name }} from this team?')"
|
||
|
|
>
|
||
|
|
<i class="fas fa-trash"></i>
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
{{ end }}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
{{ else }}
|
||
|
|
<div class="px-6 py-8 text-center">
|
||
|
|
<div class="text-gray-400 mb-4">
|
||
|
|
<i class="fas fa-users text-4xl"></i>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">No volunteers assigned</h3>
|
||
|
|
<p class="text-gray-500">Use the form above to assign volunteers to this team lead.</p>
|
||
|
|
</div>
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Mobile Volunteer Cards -->
|
||
|
|
<div class="md:hidden">
|
||
|
|
{{ if .Volunteers }}
|
||
|
|
<div class="divide-y divide-gray-100">
|
||
|
|
{{ range .Volunteers }}
|
||
|
|
<div class="px-6 py-4">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div class="flex items-center space-x-3 flex-1 min-w-0">
|
||
|
|
<div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center flex-shrink-0">
|
||
|
|
<i class="fas fa-user text-gray-500"></i>
|
||
|
|
</div>
|
||
|
|
<div class="flex-1 min-w-0">
|
||
|
|
<div class="text-sm font-medium text-gray-900 truncate">{{ .Name }}</div>
|
||
|
|
<div class="flex items-center mt-1">
|
||
|
|
<span class="inline-flex items-center px-2 py-1 text-xs font-medium bg-green-100 text-green-700 rounded-full">
|
||
|
|
<i class="fas fa-check mr-1"></i> Assigned
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<form action="/team_builder/remove_volunteer" method="POST" class="ml-4">
|
||
|
|
<input type="hidden" name="team_lead_id" value="{{ $teamLeadID }}" />
|
||
|
|
<input type="hidden" name="volunteer_id" value="{{ .ID }}" />
|
||
|
|
<button
|
||
|
|
type="submit"
|
||
|
|
class="px-3 py-2 text-red-600 hover:text-red-800 hover:bg-red-50 rounded-lg transition-colors text-sm font-medium"
|
||
|
|
onclick="return confirm('Remove {{ .Name }} from this team?')"
|
||
|
|
>
|
||
|
|
<i class="fas fa-trash mr-1"></i> Remove
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
{{ else }}
|
||
|
|
<div class="px-6 py-8 text-center">
|
||
|
|
<div class="text-gray-400 mb-4">
|
||
|
|
<i class="fas fa-users text-4xl"></i>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">No volunteers assigned</h3>
|
||
|
|
<p class="text-gray-500 text-sm">Use the form above to assign volunteers to this team lead.</p>
|
||
|
|
</div>
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{{ end }}
|
||
|
|
|
||
|
|
<!-- No Team Leads State -->
|
||
|
|
{{ if not .TeamLeads }}
|
||
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
||
|
|
<div class="px-6 py-12 text-center">
|
||
|
|
<div class="text-gray-400 mb-4">
|
||
|
|
<i class="fas fa-user-tie text-6xl"></i>
|
||
|
|
</div>
|
||
|
|
<h3 class="text-xl font-medium text-gray-900 mb-2">No Team Leads Available</h3>
|
||
|
|
<p class="text-gray-500">Add team leads to start building teams and assigning volunteers.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
/* Consistent styling with addresses component */
|
||
|
|
input, select, button {
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
button {
|
||
|
|
font-weight: 500;
|
||
|
|
letter-spacing: 0.025em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Ensure proper responsive behavior */
|
||
|
|
@media (max-width: 640px) {
|
||
|
|
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
|
||
|
|
--tw-space-x-reverse: 0;
|
||
|
|
margin-right: calc(1rem * var(--tw-space-x-reverse));
|
||
|
|
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
{{ end }}
|