05/29 Optimize customer dashboard UI

app/templates/dashboard.html

@@ -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">
+      <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>
       {% 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>
+        </div>
-                <th>Address</th>
+        {% endif %}
-                <th>Contract</th>
+        <div class="row g-2" id="facilityGrid">
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
           {% for f in customer_facilities %}
-              <tr>
+          <div class="col-12 col-sm-6 col-lg-4 facility-col">
-                <td><strong>{{ f.name }}</strong></td>
+            <div class="border rounded p-2 h-100 d-flex flex-column facility-card">
-                <td class="text-muted small">{{ f.address or '—' }}</td>
+              <div class="fw-semibold mb-1 small">{{ f.name }}</div>
-                <td class="text-muted small">{{ f.project.name if f.project else '—' }}</td>
+              <div class="text-muted" style="font-size:.8rem;">{{ f.address or '—' }}</div>
-                <td>
+              <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) ─────────────────────────────────── #}