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

@@ -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