Hugging Face's logo

Spaces:
lokesh341
/
api
Sleeping

App Files Community
lokesh341 commited on
Commit
442188e
·
verified ·
1 Parent(s): 0242297

Update templates/dashboard.html

Browse files
Files changed (1) hide show
  1. templates/dashboard.html +166 -0
templates/dashboard.html CHANGED
@@ -115,6 +115,172 @@
115
  </div>
116
  </div>
117
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118
  <!-- Reports & Certifications -->
119
  <div class="reports">
120
  <h2>Reports & Certifications</h2>
 
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><html>
169
+ <head>
170
+ <title>Subcontractor Performance Score App</title>
171
+ <style>
172
+ body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f7fa; }
173
+ h1, h2 { color: #333; }
174
+ .container { max-width: 1200px; margin: 0 auto; }
175
+ .summary-cards { display: flex; gap: 20px; margin-bottom: 20px; }
176
+ .card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); flex: 1; text-align: center; }
177
+ .card h3 { margin: 0 0 10px; color: #555; }
178
+ .card p { margin: 0; font-size: 24px; color: #333; }
179
+ .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; }
180
+ table { width: 100%; border-collapse: collapse; }
181
+ th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
182
+ th { background-color: #f2f2f2; }
183
+ .status-good { background: #e6f4ea; color: #2e7d32; padding: 5px 10px; border-radius: 12px; display: inline-block; }
184
+ .status-alert { background: #fff3e0; color: #ef6c00; padding: 5px 10px; border-radius: 12px; display: inline-block; }
185
+ .trend-up { color: green; }
186
+ .trend-down { color: red; }
187
+ .trend-flat { color: gray; }
188
+ .score-circle { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; background: #e0e0e0; margin-right: 5px; }
189
+ .reports-section { display: flex; gap: 20px; }
190
+ .reports-section > div { flex: 1; }
191
+ .checkbox-label { margin-right: 20px; }
192
+ .btn { background: #1976d2; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
193
+ .btn:hover { background: #1565c0; }
194
+ </style>
195
+ </head>
196
+ <body>
197
+ <div class="container">
198
+ <h1>Vendor Performance Dashboard</h1>
199
+ <p>Monitor and manage subcontractor performance across projects</p>
200
+
201
+ <!-- Summary Cards -->
202
+ <div class="summary-cards">
203
+ <div class="card">
204
+ <h3>Total Vendors</h3>
205
+ <p>{{ total_vendors }}</p>
206
+ <small>+2 in last month</small>
207
+ </div>
208
+ <div class="card">
209
+ <h3>Performance Alerts</h3>
210
+ <p>{{ performance_alerts }}</p>
211
+ <small>{{ percent_alerts }}% of vendors</small>
212
+ </div>
213
+ <div class="card">
214
+ <h3>Top Performers</h3>
215
+ <p>{{ top_performers }}</p>
216
+ <small>{{ percent_top }}% of vendors</small>
217
+ </div>
218
+ <div class="card">
219
+ <h3>Improving Vendors</h3>
220
+ <p>{{ improving_vendors }}</p>
221
+ <small>{{ percent_improving }}% of vendors</small>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Leaderboard -->
226
+ <div class="leaderboard">
227
+ <h2>Vendor Leaderboard</h2>
228
+ <p>Top performing subcontractors this month</p>
229
+ <table>
230
+ <tr>
231
+ <th>Rank</th>
232
+ <th>Vendor</th>
233
+ <th>Score</th>
234
+ <th>Trend</th>
235
+ <th>Status</th>
236
+ </tr>
237
+ {% for idx, log in top_logs %}
238
+ <tr>
239
+ <td>#{{ idx }}</td>
240
+ <td>{{ log.vendorLogName }}</td>
241
+ <td>{{ log.scores.finalScore }}</td>
242
+ <td class="{{ log.trend }}">{{ log.trend_symbol }}</td>
243
+ <td><span class="{{ log.status_class }}">{{ log.status_text }}</span></td>
244
+ </tr>
245
+ {% endfor %}
246
+ </table>
247
+ </div>
248
+
249
+ <!-- Performance Alerts -->
250
+ <div class="alerts">
251
+ <h2>Performance Alerts</h2>
252
+ <p>Vendors requiring attention</p>
253
+ {% if alert_logs %}
254
+ {% for log in alert_logs %}
255
+ <div style="margin-bottom: 10px;">
256
+ <span style="color: #ef6c00;">⚠️ {{ log.vendorLogName }}</span> - Overall: {{ log.scores.finalScore }}
257
+ <br>Quality: {{ log.scores.qualityScore }} | Timeliness: {{ log.scores.timelinessScore }}
258
+ <a href="#" style="margin-left: 10px; color: #1976d2;">Review</a>
259
+ </div>
260
+ {% endfor %}
261
+ {% else %}
262
+ <p>No vendors require attention at this time.</p>
263
+ {% endif %}
264
+ </div>
265
+
266
+ <!-- Top Performing Vendors -->
267
+ <div class="top-performers">
268
+ <h2>Top Performing Vendors</h2>
269
+ <p>Vendors with the highest performance scores this month</p>
270
+ <div style="display: flex; gap: 20px; flex-wrap: wrap;">
271
+ {% for log in top_performing_logs %}
272
+ <div style="flex: 1; min-width: 200px;">
273
+ <p>{{ log.vendorLogName }}<br><small>Last updated: 5/1/2025</small></p>
274
+ <span class="score-circle" style="background: #e0e0e0;">{{ log.scores.finalScore }}</span> Overall
275
+ <span class="score-circle" style="background: #e0e0e0;">{{ log.scores.qualityScore }}</span> Quality
276
+ <span class="score-circle" style="background: #e0e0e0;">{{ log.scores.timelinessScore }}</span> Time
277
+ <span class="score-circle" style="background: #e0e0e0;">{{ log.scores.safetyScore }}</span> Safety
278
+ <span class="score-circle" style="background: #e0e0e0;">{{ log.scores.communicationScore }}</span> Comm
279
+ </div>
280
+ {% endfor %}
281
+ </div>
282
+ </div>
283
+
284
  <!-- Reports & Certifications -->
285
  <div class="reports">
286
  <h2>Reports & Certifications</h2>