File size: 9,930 Bytes
6638394 4652763 6638394 4652763 6638394 4652763 6638394 4652763 6638394 4652763 6638394 |
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 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 |
<!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>
<!-- Summary Cards -->
<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>
<!-- Leaderboard -->
<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>
<!-- Performance Alerts -->
<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>
<!-- Top Performing Vendors -->
<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>
<!-- Reports & Certifications -->
<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> |