|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Subcontractor Performance Score App</title> |
|
|
<style> |
|
|
body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f7fa; } |
|
|
h1, h2 { color: #333; } |
|
|
.container { max-width: 1200px; margin: 0 auto; } |
|
|
.summary-cards { display: flex; gap: 20px; margin-bottom: 20px; } |
|
|
.card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex: 1; text-align: center; } |
|
|
.card h3 { margin: 0 0 10px; color: #555; } |
|
|
.card p { margin: 0; font-size: 24px; color: #333; } |
|
|
.leaderboard, .alerts, .top-performers, .reports { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; } |
|
|
table { width: 100%; border-collapse: collapse; } |
|
|
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; } |
|
|
th { background-color: #f2f2f2; } |
|
|
.status-good { background: #e6f4ea; color: #2e7d32; padding: 5px 10px; border-radius: 12px; display: inline-block; } |
|
|
.status-alert { background: #fff3e0; color: #ef6c00; padding: 5px 10px; border-radius: 12px; display: inline-block; } |
|
|
.trend-up { color: green; } |
|
|
.trend-down { color: red; } |
|
|
.trend-flat { color: gray; } |
|
|
.score-circle { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; background: #e0e0e0; margin-right: 5px; } |
|
|
.reports-section { display: flex; gap: 20px; } |
|
|
.reports-section > div { flex: 1; } |
|
|
.checkbox-label { margin-right: 20px; } |
|
|
.btn { background: #1976d2; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } |
|
|
.btn:hover { background: #1565c0; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>Vendor Performance Dashboard</h1> |
|
|
<p>Monitor and manage subcontractor performance across projects</p> |
|
|
|
|
|
|
|
|
<div class="summary-cards"> |
|
|
<div class="card"> |
|
|
<h3>Total Vendors</h3> |
|
|
<p>{{ total_vendors }}</p> |
|
|
<small>+2 in last month</small> |
|
|
</div> |
|
|
<div class="card"> |
|
|
<h3>Performance Alerts</h3> |
|
|
<p>{{ performance_alerts }}</p> |
|
|
<small>{{ percent_alerts }}% of vendors</small> |
|
|
</div> |
|
|
<div class="card"> |
|
|
<h3>Top Performers</h3> |
|
|
<p>{{ top_performers }}</p> |
|
|
<small>{{ percent_top }}% of vendors</small> |
|
|
</div> |
|
|
<div class="card"> |
|
|
<h3>Improving Vendors</h3> |
|
|
<p>{{ improving_vendors }}</p> |
|
|
<small>{{ percent_improving }}% of vendors</small> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="leaderboard"> |
|
|
<h2>Vendor Leaderboard</h2> |
|
|
<p>Top performing subcontractors this month</p> |
|
|
{% if top_logs %} |
|
|
<table> |
|
|
<tr> |
|
|
<th>Rank</th> |
|
|
<th>Vendor</th> |
|
|
<th>Score</th> |
|
|
<th>Trend</th> |
|
|
<th>Status</th> |
|
|
</tr> |
|
|
{% for log in top_logs %} |
|
|
<tr> |
|
|
<td>#{{ log.idx }}</td> |
|
|
<td>{{ log.vendorLogName }}</td> |
|
|
<td>{{ log.scores.finalScore }}</td> |
|
|
<td class="{{ log.trend }}">{{ log.trend_symbol }}</td> |
|
|
<td><span class="{{ log.status_class }}">{{ log.status_text }}</span></td> |
|
|
</tr> |
|
|
{% endfor %} |
|
|
</table> |
|
|
{% else %} |
|
|
<p>No leaderboard data available.</p> |
|
|
{% endif %} |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="alerts"> |
|
|
<h2>Performance Alerts</h2> |
|
|
<p>Vendors requiring attention</p> |
|
|
{% if alert_logs %} |
|
|
{% for log in alert_logs %} |
|
|
<div style="margin-bottom: 10px;"> |
|
|
<span style="color: #ef6c00;">⚠️ {{ log.vendorLogName }}</span> - Overall: {{ log.scores.finalScore }} |
|
|
<br>Quality: {{ log.scores.qualityScore }} | Timeliness: {{ log.scores.timelinessScore }} |
|
|
<a href="#" style="margin-left: 10px; color: #1976d2;">Review</a> |
|
|
</div> |
|
|
{% endfor %} |
|
|
{% else %} |
|
|
<p>No vendors require attention at this time.</p> |
|
|
{% endif %} |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="top-performers"> |
|
|
<h2>Top Performing Vendors</h2> |
|
|
<p>Vendors with the highest performance scores this month</p> |
|
|
{% if top_performing_logs %} |
|
|
<div style="display: flex; gap: 20px; flex-wrap: wrap;"> |
|
|
{% for log in top_performing_logs %} |
|
|
<div style="flex: 1; min-width: 200px;"> |
|
|
<p>{{ log.vendorLogName }}<br><small>Last updated: 5/15/2025</small></p> |
|
|
<span class="score-circle">{{ log.scores.finalScore }}</span> Overall |
|
|
<span class="score-circle">{{ log.scores.qualityScore }}</span> Quality |
|
|
<span class="score-circle">{{ log.scores.timelinessScore }}</span> Time |
|
|
<span class="score-circle">{{ log.scores.safetyScore }}</span> Safety |
|
|
<span class="score-circle">{{ log.scores.communicationScore }}</span> Comm |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
{% else %} |
|
|
<p>No top performing vendors available.</p> |
|
|
{% endif %} |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="reports"> |
|
|
<h2>Reports & Certifications</h2> |
|
|
<p>Generate and manage vendor performance reports</p> |
|
|
<div class="reports-section"> |
|
|
<div> |
|
|
<h3>Generate Vendor Report</h3> |
|
|
<form action="/generate_report" method="POST"> |
|
|
<div style="margin-bottom: 10px;"> |
|
|
<label>Select Vendor</label><br> |
|
|
<select name="vendor_name" style="width: 100%; padding: 8px; margin-top: 5px;" required> |
|
|
<option value="">Choose a vendor</option> |
|
|
{% for vendor in vendor_names %} |
|
|
<option value="{{ vendor }}">{{ vendor }}</option> |
|
|
{% endfor %} |
|
|
</select> |
|
|
</div> |
|
|
<div style="margin-bottom: 10px;"> |
|
|
<label>Report Month</label><br> |
|
|
<input type="text" name="report_month" value="{{ report_month }}" readonly style="width: 100%; padding: 8px; margin-top: 5px;"> |
|
|
</div> |
|
|
<div style="margin-bottom: 10px;"> |
|
|
<label>Include in Report</label><br> |
|
|
<label class="checkbox-label"><input type="checkbox" checked> Quality Metrics</label> |
|
|
<label class="checkbox-label"><input type="checkbox" checked> Timeliness</label> |
|
|
<label class="checkbox-label"><input type="checkbox" checked> Safety Record</label> |
|
|
<label class="checkbox-label"><input type="checkbox" checked> Communication</label> |
|
|
<label class="checkbox-label"><input type="checkbox" checked> Incidents</label> |
|
|
<label class="checkbox-label"><input type="checkbox" checked> Recommendations</label> |
|
|
</div> |
|
|
<button type="submit" class="btn">Generate Report</button> |
|
|
</form> |
|
|
</div> |
|
|
<div> |
|
|
<h3>Recent Reports</h3> |
|
|
{% if sorted_logs %} |
|
|
{% for log in sorted_logs[:5] %} |
|
|
<div style="margin-bottom: 10px;"> |
|
|
📄 {{ log.vendorLogName }} - Monthly Performance |
|
|
<span style="float: right;"> |
|
|
<small>5/15/2025</small> |
|
|
<a href="#" style="margin-left: 10px;">⬇</a> |
|
|
</span> |
|
|
</div> |
|
|
{% endfor %} |
|
|
{% else %} |
|
|
<p>No recent reports available.</p> |
|
|
{% endif %} |
|
|
<small>Last report generated: 3 hours ago</small> |
|
|
<br> |
|
|
<a href="/reports" style="color: #1976d2;">View All Reports</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
