nngo/LT_Janitorial_Quality_Control
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

05/29 Optimize customer dashboard UI

Browse Source
This commit is contained in:
nngo
2026-05-29 10:24:45 -04:00
parent fbf2f61c6b
commit 805ae3188d
1 changed files with 78 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/dashboard.html
+69 -24
View File
@@ -131,28 +131,32 @@
<div class="row g-3 mb-4">
<div class="col-12">
<div class="card shadow-sm">
<div class="card-header bg-light fw-semibold">
<i class="bi bi-building me-1"></i> Your Facilities
<div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center">
<span><i class="bi bi-building me-1"></i> Your Facilities</span>
{% if customer_facilities %}
<span class="badge bg-secondary rounded-pill">{{ customer_facilities|length }}</span>
{% endif %}
</div>
{% if customer_facilities %}
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th>Facility</th>
<th>Address</th>
<th>Contract</th>
<th></th>
</tr>
</thead>
<tbody>
<div class="card-body pb-2">
{% if customer_facilities|length > 6 %}
<div class="mb-3">
<input type="text" id="facilitySearch" class="form-control form-control-sm"
placeholder="Search facilities…">
</div>
{% endif %}
<div class="row g-2" id="facilityGrid">
{% for f in customer_facilities %}
<tr>
<td><strong>{{ f.name }}</strong></td>
<td class="text-muted small">{{ f.address or '—' }}</td>
<td class="text-muted small">{{ f.project.name if f.project else '—' }}</td>
<td>
<div class="col-12 col-sm-6 col-lg-4 facility-col">
<div class="border rounded p-2 h-100 d-flex flex-column facility-card">
<div class="fw-semibold mb-1 small">{{ f.name }}</div>
<div class="text-muted" style="font-size:.8rem;">{{ f.address or '—' }}</div>
<div class="my-1">
<span class="badge bg-light text-dark border" style="font-size:.75rem;">
{{ f.project.name if f.project else '—' }}
</span>
</div>
<div class="mt-auto pt-1">
<a href="{{ url_for('facilities.view_facility', facility_id=f.id) }}"
class="btn btn-sm btn-outline-primary">
<i class="bi bi-eye"></i> View
@@ -161,13 +165,19 @@
class="btn btn-sm btn-outline-secondary ms-1">
<i class="bi bi-graph-up"></i> Report
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endfor %}
</div>
{% if customer_facilities|length > 9 %}
<div id="facilityShowMore" class="text-center mt-3">
<button class="btn btn-sm btn-link text-muted" id="toggleFacilities">
Show all {{ customer_facilities|length }} facilities <i class="bi bi-chevron-down"></i>
</button>
</div>
{% endif %}
</div>
{% else %}
<div class="card-body text-muted small">
<i class="bi bi-info-circle me-1"></i>
@@ -177,6 +187,41 @@
</div>
</div>
</div>
{% if current_user.role == 'customer' and customer_facilities and customer_facilities|length > 9 %}
<script>
(function () {
const VISIBLE = 9;
const cols = document.querySelectorAll('#facilityGrid .facility-col');
const btn = document.getElementById('toggleFacilities');
const more = document.getElementById('facilityShowMore');
let expanded = false;
cols.forEach((c, i) => { if (i >= VISIBLE) c.style.display = 'none'; });
btn.addEventListener('click', function () {
expanded = !expanded;
cols.forEach((c, i) => {
if (i >= VISIBLE) c.style.display = expanded ? '' : 'none';
});
btn.innerHTML = expanded
? 'Show fewer <i class="bi bi-chevron-up"></i>'
: 'Show all {{ customer_facilities|length }} facilities <i class="bi bi-chevron-down"></i>';
});
{% if customer_facilities|length > 6 %}
document.getElementById('facilitySearch').addEventListener('input', function () {
const q = this.value.toLowerCase();
cols.forEach(col => {
const match = col.querySelector('.facility-card').textContent.toLowerCase().includes(q);
col.style.display = match ? '' : 'none';
});
more.style.display = this.value ? 'none' : '';
});
{% endif %}
})();
</script>
{% endif %}
{% endif %}
{# ── System quick stats (admin/director) ─────────────────────────────────── #}