From 965f28186fd6974b603065be2e9d97c34de26f1e Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Fri, 10 Jul 2026 11:19:53 +0000
Subject: [PATCH] Add group-by-location toggle to maintenance summary filters

Layers chip in the second chip bar groups tasks by location alphabetically
with section headers. Location name is suppressed from task card meta when
grouping is active to avoid redundancy.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/Summary.tsx | 107 +++++++++++++++++++++------------
 1 file changed, 67 insertions(+), 40 deletions(-)

diff --git a/frontend/src/pages/Summary.tsx b/frontend/src/pages/Summary.tsx
index ef74e77..9dee753 100644
--- a/frontend/src/pages/Summary.tsx
+++ b/frontend/src/pages/Summary.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { Plus, RefreshCw, Camera, BedDouble } from 'lucide-react'
+import { Plus, RefreshCw, Camera, BedDouble, Layers } from 'lucide-react'
 import type { Task, Category, Location, AppConfig, TaskStatus } from '../types'
 import { STATUS_LABELS, can } from '../types'
 import { fetchTasks, fetchLocations, fetchConfig, fetchOccupancy } from '../api'
@@ -25,6 +25,7 @@ export default function Summary() {
   const [categoryFilter, setCategoryFilter] = useState<number | null>(null)
   const [mineOnly, setMineOnly] = useState(false)
   const [roomsView, setRoomsView] = useState(false)
+  const [groupByLocation, setGroupByLocation] = useState(false)
 
   const [showNew, setShowNew] = useState(false)
   const [openTask, setOpenTask] = useState<number | null>(null)
@@ -83,6 +84,17 @@ export default function Summary() {
     return { total: tasks.length, occupied, arriving, free: tasks.length - occupied - arriving }
   }, [tasks, roomsView, occupiedSiteIds, arrivingSiteIds])
 
+  const taskGroups = useMemo(() => {
+    if (!groupByLocation) return null
+    const groups: Record<string, Task[]> = {}
+    for (const t of tasks) {
+      const key = t.location_name || 'Unknown'
+      if (!groups[key]) groups[key] = []
+      groups[key].push(t)
+    }
+    return Object.entries(groups).sort(([a], [b]) => a.localeCompare(b))
+  }, [tasks, groupByLocation])
+
   const roomsCategoryExists = !!roomsCat
 
   function toggleRoomsView() {
@@ -139,55 +151,70 @@ export default function Summary() {
               : 'Rooms Accessible View'}
           </button>
         )}
+        <button className={`chip ${groupByLocation ? 'active' : ''}`} onClick={() => setGroupByLocation(v => !v)}>
+          <Layers size={13} strokeWidth={1.75} /> Group by location
+        </button>
       </div>
 
       {tasks.length === 0 && !loading && (
         <div className="empty-state">No open tasks match these filters.</div>
       )}
 
-      {tasks.map(t => {
-        const sid = t.newbook_site_id ? String(t.newbook_site_id) : null
-        const isOccupied = roomsView && !!sid && occupiedSiteIds.has(sid)
-        const isArriving = roomsView && !!sid && !isOccupied && arrivingSiteIds.has(sid)
-        return (
-          <div
-            key={t.id}
-            className={`card task-card ${t.priority === 'urgent' ? 'urgent' : t.priority === 'high' ? 'high' : ''} ${t.unusable ? 'unusable' : ''}`}
-            style={isOccupied ? { opacity: 0.5, filter: 'grayscale(0.3)' } : undefined}
-            onClick={() => setOpenTask(t.id)}
-          >
-            <div className="task-card-main">
-              <div className="task-card-title">
-                {t.title}
-                {isOccupied && <span className="badge badge-outline"><BedDouble size={10} strokeWidth={1.75} /> Occupied</span>}
-                {isArriving && <span className="badge" style={{ background: '#fef3c7', color: '#92400e', border: '1px solid #fcd34d' }}><BedDouble size={10} strokeWidth={1.75} /> Arrival today</span>}
-                {t.unusable && <UnusableBadge />}
-                {t.template_id && <span className="badge badge-outline">Recurring</span>}
+      {(() => {
+        const renderTask = (t: Task) => {
+          const sid = t.newbook_site_id ? String(t.newbook_site_id) : null
+          const isOccupied = roomsView && !!sid && occupiedSiteIds.has(sid)
+          const isArriving = roomsView && !!sid && !isOccupied && arrivingSiteIds.has(sid)
+          return (
+            <div
+              key={t.id}
+              className={`card task-card ${t.priority === 'urgent' ? 'urgent' : t.priority === 'high' ? 'high' : ''} ${t.unusable ? 'unusable' : ''}`}
+              style={isOccupied ? { opacity: 0.5, filter: 'grayscale(0.3)' } : undefined}
+              onClick={() => setOpenTask(t.id)}
+            >
+              <div className="task-card-main">
+                <div className="task-card-title">
+                  {t.title}
+                  {isOccupied && <span className="badge badge-outline"><BedDouble size={10} strokeWidth={1.75} /> Occupied</span>}
+                  {isArriving && <span className="badge" style={{ background: '#fef3c7', color: '#92400e', border: '1px solid #fcd34d' }}><BedDouble size={10} strokeWidth={1.75} /> Arrival today</span>}
+                  {t.unusable && <UnusableBadge />}
+                  {t.template_id && <span className="badge badge-outline">Recurring</span>}
+                </div>
+                <div className="task-card-meta">
+                  {!groupByLocation && <span>{t.location_name}</span>}
+                  <span>{t.category_name}</span>
+                  {t.asset_name && <span>{t.asset_name}</span>}
+                  <span>{ageLabel(t.created_at)} old</span>
+                  {t.due_date && (
+                    <span className={new Date(t.due_date) < new Date() ? 'overdue' : ''}>
+                      due {formatDate(t.due_date)}
+                    </span>
+                  )}
+                  {t.hold_until && <span>held until {formatDate(t.hold_until)}</span>}
+                  {t.photo_count > 0 && <span><Camera size={12} strokeWidth={1.75} style={{ verticalAlign: -2 }} /> {t.photo_count}</span>}
+                </div>
               </div>
-              <div className="task-card-meta">
-                <span>{t.location_name}</span>
-                <span>{t.category_name}</span>
-                {t.asset_name && <span>{t.asset_name}</span>}
-                <span>{ageLabel(t.created_at)} old</span>
-                {t.due_date && (
-                  <span className={new Date(t.due_date) < new Date() ? 'overdue' : ''}>
-                    due {formatDate(t.due_date)}
-                  </span>
-                )}
-                {t.hold_until && <span>held until {formatDate(t.hold_until)}</span>}
-                {t.photo_count > 0 && <span><Camera size={12} strokeWidth={1.75} style={{ verticalAlign: -2 }} /> {t.photo_count}</span>}
+              <div className="task-card-side">
+                <PriorityBadge priority={t.priority} />
+                <StatusBadge status={t.status} />
+                <span className="muted" style={{ fontSize: 11.5 }}>
+                  {t.assigned_type === 'contractor' ? (t.contractor_name || '—') : (t.assigned_to_name || 'Unassigned')}
+                </span>
               </div>
             </div>
-            <div className="task-card-side">
-              <PriorityBadge priority={t.priority} />
-              <StatusBadge status={t.status} />
-              <span className="muted" style={{ fontSize: 11.5 }}>
-                {t.assigned_type === 'contractor' ? (t.contractor_name || '—') : (t.assigned_to_name || 'Unassigned')}
-              </span>
+          )
+        }
+
+        if (taskGroups) {
+          return taskGroups.map(([locationName, groupTasks]) => (
+            <div key={locationName}>
+              <div className="section-title">{locationName} <span style={{ fontWeight: 400, textTransform: 'none', letterSpacing: 0 }}>({groupTasks.length})</span></div>
+              {groupTasks.map(renderTask)}
             </div>
-          </div>
-        )
-      })}
+          ))
+        }
+        return tasks.map(renderTask)
+      })()}
 
       {showNew && (
         <NewTaskModal