| <!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> |
