Fix expired session showing EmbeddedFallback instead of login page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add group-by-location toggle to maintenance summary filters
2026-07-10 11:44:00 +00:00 · 2026-07-10 11:19:53 +00:00
3 changed files with 74 additions and 53 deletions
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@ -11,6 +11,10 @@ async function request<T>(path: string, opts: RequestInit = {}): Promise<T> {
    headers: { 'Content-Type': 'application/json', ...opts.headers },
    ...opts,
  })
+  if (res.status === 401) {
+    ;(window.top ?? window).location.href = '/login'
+    throw new Error('Unauthenticated')
+  }
  if (!res.ok) {
    const err = await res.json().catch(() => ({ error: res.statusText }))
    throw new Error(err.error || `Request failed: ${res.status}`)
--- a/frontend/src/components/AuthGate.tsx
+++ b/frontend/src/components/AuthGate.tsx
@ -12,30 +12,20 @@ export function useAuth() {

 export default function AuthGate({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(null)
-  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    fetch('/api/auth/verify?app=maintenance', { credentials: 'include' })
      .then(r => {
-        if (r.status === 401 || r.status === 403) {
-          window.location.href = `/portal?redirect=${encodeURIComponent(window.location.href)}`
+        if (!r.ok) {
+          ;(window.top ?? window).location.href = '/login'
          return null
        }
-        if (!r.ok) throw new Error(`Auth check failed: ${r.status}`)
        return r.json()
      })
      .then(data => { if (data) setUser(data) })
-      .catch(err => setError(err.message))
+      .catch(() => { ;(window.top ?? window).location.href = '/login' })
  }, [])

-  if (error) {
-    return (
-      <div style={{ padding: 32, color: 'var(--danger)', fontFamily: 'var(--font)' }}>
-        Authentication error: {error}
-      </div>
-    )
-  }
-
  if (!user) {
    return (
      <div style={{
--- 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