Hugging Face's logo

Spaces:
lokesh341
/
api
Sleeping

App Files Community
lokesh341 commited on
Commit
07be00e
·
verified ·
1 Parent(s): 3d4b58a

Create templates/dashboard.html

Browse files
Files changed (1) hide show
  1. templates/dashboard.html +168 -0
templates/dashboard.html ADDED
@@ -0,0 +1,168 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Subcontractor Performance Score App</title>
5
+ <style>
6
+ body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f7fa; }
7
+ h1, h2 { color: #333; }
8
+ .container { max-width: 1200px; margin: 0 auto; }
9
+ .summary-cards { display: flex; gap: 20px; margin-bottom: 20px; }
10
+ .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex: 1; text-align: center; }
11
+ .card h3 { margin: 0 0 10px; color: #555; }
12
+ .card p { margin: 0; font-size: 24px; color: #333; }
13
+ .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; }
14
+ table { width: 100%; border-collapse: collapse; }
15
+ th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
16
+ th { background-color: #f2f2f2; }
17
+ .status-good { background: #e6f4ea; color: #2e7d32; padding: 5px 10px; border-radius: 12px; display: inline-block; }
18
+ .status-alert { background: #fff3e0; color: #ef6c00; padding: 5px 10px; border-radius: 12px; display: inline-block; }
19
+ .trend-up { color: green; }
20
+ .trend-down { color: red; }
21
+ .trend-flat { color: gray; }
22
+ .score-circle { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; background: #e0e0e0; margin-right: 5px; }
23
+ .reports-section { display: flex; gap: 20px; }
24
+ .reports-section > div { flex: 1; }
25
+ .checkbox-label { margin-right: 20px; }
26
+ .btn { background: #1976d2; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
27
+ .btn:hover { background: #1565c0; }
28
+ </style>
29
+ </head>
30
+ <body>
31
+ <div class="container">
32
+ <h1>Vendor Performance Dashboard</h1>
33
+ <p>Monitor and manage subcontractor performance across projects</p>
34
+
35
+ <!-- Summary Cards -->
36
+ <div class="summary-cards">
37
+ <div class="card">
38
+ <h3>Total Vendors</h3>
39
+ <p>{{ total_vendors }}</p>
40
+ <small>+2 in last month</small>
41
+ </div>
42
+ <div class="card">
43
+ <h3>Performance Alerts</h3>
44
+ <p>{{ performance_alerts }}</p>
45
+ <small>{{ percent_alerts }}% of vendors</small>
46
+ </div>
47
+ <div class="card">
48
+ <h3>Top Performers</h3>
49
+ <p>{{ top_performers }}</p>
50
+ <small>{{ percent_top }}% of vendors</small>
51
+ </div>
52
+ <div class="card">
53
+ <h3>Improving Vendors</h3>
54
+ <p>{{ improving_vendors }}</p>
55
+ <small>{{ percent_improving }}% of vendors</small>
56
+ </div>
57
+ </div>
58
+
59
+ <!-- Leaderboard -->
60
+ <div class="leaderboard">
61
+ <h2>Vendor Leaderboard</h2>
62
+ <p>Top performing subcontractors this month</p>
63
+ <table>
64
+ <tr>
65
+ <th>Rank</th>
66
+ <th>Vendor</th>
67
+ <th>Score</th>
68
+ <th>Trend</th>
69
+ <th>Status</th>
70
+ </tr>
71
+ {% for idx, log in top_logs %}
72
+ <tr>
73
+ <td>#{{ idx }}</td>
74
+ <td>{{ log.vendorLogName }}</td>
75
+ <td>{{ log.scores.finalScore }}</td>
76
+ <td class="{{ log.trend }}">{{ log.trend_symbol }}</td>
77
+ <td><span class="{{ log.status_class }}">{{ log.status_text }}</span></td>
78
+ </tr>
79
+ {% endfor %}
80
+ </table>
81
+ </div>
82
+
83
+ <!-- Performance Alerts -->
84
+ <div class="alerts">
85
+ <h2>Performance Alerts</h2>
86
+ <p>Vendors requiring attention</p>
87
+ {% if alert_logs %}
88
+ {% for log in alert_logs %}
89
+ <div style="margin-bottom: 10px;">
90
+ <span style="color: #ef6c00;">⚠️ {{ log.vendorLogName }}</span> - Overall: {{ log.scores.finalScore }}
91
+ <br>Quality: {{ log.scores.qualityScore }} | Timeliness: {{ log.scores.timelinessScore }}
92
+ <a href="#" style="margin-left: 10px; color: #1976d2;">Review</a>
93
+ </div>
94
+ {% endfor %}
95
+ {% else %}
96
+ <p>No vendors require attention at this time.</p>
97
+ {% endif %}
98
+ </div>
99
+
100
+ <!-- Top Performing Vendors -->
101
+ <div class="top-performers">
102
+ <h2>Top Performing Vendors</h2>
103
+ <p>Vendors with the highest performance scores this month</p>
104
+ <div style="display: flex; gap: 20px; flex-wrap: wrap;">
105
+ {% for log in top_performing_logs %}
106
+ <div style="flex: 1; min-width: 200px;">
107
+ <p>{{ log.vendorLogName }}<br><small>Last updated: 5/1/2025</small></p>
108
+ <span class="score-circle" style="background: #e0e0e0;">{{ log.scores.finalScore }}</span> Overall
109
+ <span class="score-circle" style="background: #e0e0e0;">{{ log.scores.qualityScore }}</span> Quality
110
+ <span class="score-circle" style="background: #e0e0e0;">{{ log.scores.timelinessScore }}</span> Time
111
+ <span class="score-circle" style="background: #e0e0e0;">{{ log.scores.safetyScore }}</span> Safety
112
+ <span class="score-circle" style="background: #e0e0e0;">{{ log.scores.communicationScore }}</span> Comm
113
+ </div>
114
+ {% endfor %}
115
+ </div>
116
+ </div>
117
+
118
+ <!-- Reports & Certifications -->
119
+ <div class="reports">
120
+ <h2>Reports & Certifications</h2>
121
+ <p>Generate and manage vendor performance reports</p>
122
+ <div class="reports-section">
123
+ <div>
124
+ <h3>Generate Vendor Report</h3>
125
+ <div style="margin-bottom: 10px;">
126
+ <label>Select Vendor</label><br>
127
+ <select style="width: 100%; padding: 8px; margin-top: 5px;">
128
+ <option>Choose a vendor</option>
129
+ {% for log in vendor_logs %}
130
+ <option>{{ log.vendorLogName }}</option>
131
+ {% endfor %}
132
+ </select>
133
+ </div>
134
+ <div style="margin-bottom: 10px;">
135
+ <label>Report Month</label><br>
136
+ <input type="text" value="May, 2025" readonly style="width: 100%; padding: 8px; margin-top: 5px;">
137
+ </div>
138
+ <div style="margin-bottom: 10px;">
139
+ <label>Include in Report</label><br>
140
+ <label class="checkbox-label"><input type="checkbox" checked> Quality Metrics</label>
141
+ <label class="checkbox-label"><input type="checkbox" checked> Timeliness</label>
142
+ <label class="checkbox-label"><input type="checkbox" checked> Safety Record</label>
143
+ <label class="checkbox-label"><input type="checkbox" checked> Communication</label>
144
+ <label class="checkbox-label"><input type="checkbox" checked> Incidents</label>
145
+ <label class="checkbox-label"><input type="checkbox" checked> Recommendations</label>
146
+ </div>
147
+ <button class="btn">Generate Report</button>
148
+ </div>
149
+ <div>
150
+ <h3>Recent Reports</h3>
151
+ {% for log in sorted_logs[:5] %}
152
+ <div style="margin-bottom: 10px;">
153
+ 📄 {{ log.vendorLogName }} - Monthly Performance
154
+ <span style="float: right;">
155
+ <small>5/1/2025</small>
156
+ <a href="#" style="margin-left: 10px;">⬇</a>
157
+ </span>
158
+ </div>
159
+ {% endfor %}
160
+ <small>Last report generated: 3 hours ago</small>
161
+ <br>
162
+ <a href="#" style="color: #1976d2;">View All Reports</a>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+ </body>
168
+ </html>