05/29 Optimize customer dashboard UI
This commit is contained in:
@@ -131,42 +131,52 @@
|
|||||||
<div class="row g-3 mb-4">
|
<div class="row g-3 mb-4">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm">
|
||||||
<div class="card-header bg-light fw-semibold">
|
<div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center">
|
||||||
<i class="bi bi-building me-1"></i> Your Facilities
|
<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>
|
</div>
|
||||||
{% if customer_facilities %}
|
{% if customer_facilities %}
|
||||||
<div class="card-body p-0">
|
<div class="card-body pb-2">
|
||||||
<div class="table-responsive">
|
{% if customer_facilities|length > 6 %}
|
||||||
<table class="table table-hover mb-0">
|
<div class="mb-3">
|
||||||
<thead class="table-light">
|
<input type="text" id="facilitySearch" class="form-control form-control-sm"
|
||||||
<tr>
|
placeholder="Search facilities…">
|
||||||
<th>Facility</th>
|
|
||||||
<th>Address</th>
|
|
||||||
<th>Contract</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{% 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>
|
|
||||||
<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
|
|
||||||
</a>
|
|
||||||
<a href="{{ url_for('reports.facility_report', facility_id=f.id) }}"
|
|
||||||
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>
|
||||||
|
{% endif %}
|
||||||
|
<div class="row g-2" id="facilityGrid">
|
||||||
|
{% for f in customer_facilities %}
|
||||||
|
<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
|
||||||
|
</a>
|
||||||
|
<a href="{{ url_for('reports.facility_report', facility_id=f.id) }}"
|
||||||
|
class="btn btn-sm btn-outline-secondary ms-1">
|
||||||
|
<i class="bi bi-graph-up"></i> Report
|
||||||
|
</a>
|
||||||
|
</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>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="card-body text-muted small">
|
<div class="card-body text-muted small">
|
||||||
@@ -177,6 +187,41 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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 %}
|
{% endif %}
|
||||||
|
|
||||||
{# ── System quick stats (admin/director) ─────────────────────────────────── #}
|
{# ── System quick stats (admin/director) ─────────────────────────────────── #}
|
||||||
|
|||||||
Reference in New Issue
Block a user