|
|
{% extends "base.html" %}
|
|
|
|
|
|
{% block title %}Staff Allocation - Architecture PM System{% endblock %}
|
|
|
|
|
|
{% block content %}
|
|
|
<div class="container-fluid">
|
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
|
<h1><i class="bi bi-person-workspace"></i> Staff Allocation</h1>
|
|
|
<button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#addAllocationModal">
|
|
|
<i class="bi bi-plus-circle"></i> Add Allocation
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="row g-3 mb-4">
|
|
|
<div class="col-md-3">
|
|
|
<div class="card bg-info text-white">
|
|
|
<div class="card-body">
|
|
|
<h6 class="card-title">Total Allocations</h6>
|
|
|
<h3>{{ allocations|length }}</h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-3">
|
|
|
<div class="card bg-primary text-white">
|
|
|
<div class="card-body">
|
|
|
<h6 class="card-title">Total Hours Allocated</h6>
|
|
|
<h3>{{ "{:,.0f}".format(allocations|sum(attribute='hours_allocated')|default(0)) }}</h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-3">
|
|
|
<div class="card bg-success text-white">
|
|
|
<div class="card-body">
|
|
|
<h6 class="card-title">Total Hours Worked</h6>
|
|
|
<h3>{{ "{:,.0f}".format(allocations|sum(attribute='hours_worked')|default(0)) }}</h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-3">
|
|
|
<div class="card bg-warning text-dark">
|
|
|
<div class="card-body">
|
|
|
<h6 class="card-title">Avg Utilization</h6>
|
|
|
{% set total_allocated = allocations|sum(attribute='hours_allocated')|default(1) %}
|
|
|
{% set total_worked = allocations|sum(attribute='hours_worked')|default(0) %}
|
|
|
<h3>{{ "{:.1f}".format((total_worked / total_allocated * 100) if total_allocated > 0 else 0) }}%</h3>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card">
|
|
|
<div class="card-body">
|
|
|
<div class="table-responsive">
|
|
|
<table class="table table-striped table-hover table-sm">
|
|
|
<thead class="table-dark">
|
|
|
<tr>
|
|
|
<th>ID</th>
|
|
|
<th>Project</th>
|
|
|
<th>Milestone</th>
|
|
|
<th>Employee</th>
|
|
|
<th>Role</th>
|
|
|
<th>Category</th>
|
|
|
<th>Hours Allocated</th>
|
|
|
<th>Hours Worked</th>
|
|
|
<th>Utilization %</th>
|
|
|
<th>Rate (AED/hr)</th>
|
|
|
<th>Cost (AED)</th>
|
|
|
<th>Skill Match</th>
|
|
|
<th>Availability</th>
|
|
|
<th>Performance</th>
|
|
|
<th>Start Date</th>
|
|
|
<th>End Date</th>
|
|
|
<th>Actions</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
{% for alloc in allocations %}
|
|
|
<tr>
|
|
|
<td>{{ alloc.allocation_id }}</td>
|
|
|
<td><span class="badge bg-secondary">{{ alloc.project_id }}</span></td>
|
|
|
<td><small>{{ alloc.milestone_name or '-' }}</small></td>
|
|
|
<td>
|
|
|
<strong>{{ alloc.employee_name }}</strong>
|
|
|
<br><small class="text-muted">{{ alloc.employee_id }}</small>
|
|
|
</td>
|
|
|
<td><small>{{ alloc.role }}</small></td>
|
|
|
<td><span class="badge bg-info">{{ alloc.category or '-' }}</span></td>
|
|
|
<td>{{ alloc.hours_allocated }}</td>
|
|
|
<td><strong>{{ alloc.hours_worked }}</strong></td>
|
|
|
<td>
|
|
|
{% set utilization = (alloc.hours_worked / alloc.hours_allocated * 100) if alloc.hours_allocated > 0 else 0 %}
|
|
|
<div class="progress" style="height: 20px; min-width: 60px;">
|
|
|
<div class="progress-bar
|
|
|
{% if utilization >= 100 %}bg-success
|
|
|
{% elif utilization >= 75 %}bg-info
|
|
|
{% elif utilization >= 50 %}bg-warning
|
|
|
{% else %}bg-danger{% endif %}"
|
|
|
role="progressbar"
|
|
|
style="width: {{ [utilization, 100]|min }}%">
|
|
|
{{ "{:.0f}".format(utilization) }}%
|
|
|
</div>
|
|
|
</div>
|
|
|
</td>
|
|
|
<td>{{ alloc.hourly_rate_aed }}</td>
|
|
|
<td><strong>{{ "{:,.2f}".format(alloc.hours_worked * alloc.hourly_rate_aed) }}</strong></td>
|
|
|
<td>
|
|
|
{% if alloc.skill_match_score %}
|
|
|
<span class="badge
|
|
|
{% if alloc.skill_match_score >= 90 %}bg-success
|
|
|
{% elif alloc.skill_match_score >= 70 %}bg-info
|
|
|
{% else %}bg-warning{% endif %}">
|
|
|
{{ alloc.skill_match_score }}
|
|
|
</span>
|
|
|
{% else %}
|
|
|
-
|
|
|
{% endif %}
|
|
|
</td>
|
|
|
<td>
|
|
|
{% if alloc.availability_status == 'AVAILABLE' %}
|
|
|
<span class="badge bg-success">Available</span>
|
|
|
{% elif alloc.availability_status == 'BUSY' %}
|
|
|
<span class="badge bg-danger">Busy</span>
|
|
|
{% elif alloc.availability_status == 'PARTIALLY_AVAILABLE' %}
|
|
|
<span class="badge bg-warning text-dark">Partial</span>
|
|
|
{% elif alloc.availability_status == 'ON_LEAVE' %}
|
|
|
<span class="badge bg-secondary">On Leave</span>
|
|
|
{% else %}
|
|
|
<span class="badge bg-light text-dark">{{ alloc.availability_status or '-' }}</span>
|
|
|
{% endif %}
|
|
|
</td>
|
|
|
<td>
|
|
|
{% if alloc.performance_rating == 'EXCELLENT' %}
|
|
|
<span class="badge bg-success">⭐⭐⭐⭐⭐</span>
|
|
|
{% elif alloc.performance_rating == 'GOOD' %}
|
|
|
<span class="badge bg-info">⭐⭐⭐⭐</span>
|
|
|
{% elif alloc.performance_rating == 'AVERAGE' %}
|
|
|
<span class="badge bg-warning text-dark">⭐⭐⭐</span>
|
|
|
{% elif alloc.performance_rating == 'NEEDS_IMPROVEMENT' %}
|
|
|
<span class="badge bg-warning">⭐⭐</span>
|
|
|
{% elif alloc.performance_rating == 'POOR' %}
|
|
|
<span class="badge bg-danger">⭐</span>
|
|
|
{% else %}
|
|
|
-
|
|
|
{% endif %}
|
|
|
</td>
|
|
|
<td>{{ alloc.start_date }}</td>
|
|
|
<td>{{ alloc.end_date or '-' }}</td>
|
|
|
<td>
|
|
|
<form method="post" action="/staff-allocation/delete/{{ alloc.allocation_id }}" style="display:inline;">
|
|
|
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?')">
|
|
|
<i class="bi bi-trash"></i>
|
|
|
</button>
|
|
|
</form>
|
|
|
</td>
|
|
|
</tr>
|
|
|
{% endfor %}
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="modal fade" id="addAllocationModal" tabindex="-1">
|
|
|
<div class="modal-dialog modal-xl">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header bg-info text-white">
|
|
|
<h5 class="modal-title">Add New Staff Allocation</h5>
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
|
</div>
|
|
|
<form method="post" action="/staff-allocation/create">
|
|
|
<div class="modal-body">
|
|
|
<div class="row g-3">
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">Project</label>
|
|
|
<select class="form-select" name="project_id" required>
|
|
|
<option value="">Select Project</option>
|
|
|
{% for project in projects %}
|
|
|
<option value="{{ project.project_id }}">{{ project.project_id }} - {{ project.project_name }}</option>
|
|
|
{% endfor %}
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">Milestone (Optional)</label>
|
|
|
<select class="form-select" name="milestone_id">
|
|
|
<option value="">Select Milestone (Optional)</option>
|
|
|
{% for milestone in milestones %}
|
|
|
<option value="{{ milestone.milestone_id }}">{{ milestone.project_id }} - {{ milestone.milestone_name }}</option>
|
|
|
{% endfor %}
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">Employee</label>
|
|
|
<select class="form-select" name="employee_id" id="employeeSelect" required>
|
|
|
<option value="">Select Employee</option>
|
|
|
{% for emp in employees %}
|
|
|
<option value="{{ emp.employee_id }}"
|
|
|
data-name="{{ emp.employee_name }}"
|
|
|
data-role="{{ emp.role }}"
|
|
|
data-rate="{{ emp.hourly_rate_aed }}">
|
|
|
{{ emp.employee_id }} - {{ emp.employee_name }} ({{ emp.role }})
|
|
|
</option>
|
|
|
{% endfor %}
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">Employee Name (Auto-filled)</label>
|
|
|
<input type="text" class="form-control" name="employee_name" id="employeeName" required readonly>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">Role (Auto-filled)</label>
|
|
|
<input type="text" class="form-control" name="role" id="employeeRole" required readonly>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">Category</label>
|
|
|
<select class="form-select" name="category">
|
|
|
<option value="Architecture">Architecture</option>
|
|
|
<option value="Project Management">Project Management</option>
|
|
|
<option value="Engineering">Engineering</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">Hours Allocated</label>
|
|
|
<input type="number" step="0.01" class="form-control" name="hours_allocated" required placeholder="80.00">
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">Hours Worked</label>
|
|
|
<input type="number" step="0.01" class="form-control" name="hours_worked" value="0" placeholder="0.00">
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">Hourly Rate (AED) (Auto-filled)</label>
|
|
|
<input type="number" step="0.01" class="form-control" name="hourly_rate_aed" id="hourlyRate" required readonly>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">Skill Match Score (0-100)</label>
|
|
|
<input type="number" class="form-control" name="skill_match_score" min="0" max="100" placeholder="85">
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">Availability Status</label>
|
|
|
<select class="form-select" name="availability_status">
|
|
|
<option value="AVAILABLE">Available</option>
|
|
|
<option value="BUSY">Busy</option>
|
|
|
<option value="PARTIALLY_AVAILABLE">Partially Available</option>
|
|
|
<option value="ON_LEAVE">On Leave</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">Performance Rating</label>
|
|
|
<select class="form-select" name="performance_rating">
|
|
|
<option value="">Not Rated</option>
|
|
|
<option value="EXCELLENT">Excellent</option>
|
|
|
<option value="GOOD">Good</option>
|
|
|
<option value="AVERAGE">Average</option>
|
|
|
<option value="NEEDS_IMPROVEMENT">Needs Improvement</option>
|
|
|
<option value="POOR">Poor</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">Start Date</label>
|
|
|
<input type="date" class="form-control" name="start_date" required>
|
|
|
</div>
|
|
|
<div class="col-md-6">
|
|
|
<label class="form-label">End Date (Optional)</label>
|
|
|
<input type="date" class="form-control" name="end_date">
|
|
|
</div>
|
|
|
<div class="col-md-12">
|
|
|
<label class="form-label">Notes (Optional)</label>
|
|
|
<textarea class="form-control" name="notes" rows="2" placeholder="Additional notes about this allocation..."></textarea>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
|
<button type="submit" class="btn btn-info">Add Allocation</button>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
document.getElementById('employeeSelect').addEventListener('change', function() {
|
|
|
const selectedOption = this.options[this.selectedIndex];
|
|
|
document.getElementById('employeeName').value = selectedOption.dataset.name || '';
|
|
|
document.getElementById('employeeRole').value = selectedOption.dataset.role || '';
|
|
|
document.getElementById('hourlyRate').value = selectedOption.dataset.rate || '';
|
|
|
});
|
|
|
</script>
|
|
|
{% endblock %} |
