Simplify settings workspace and fix responsive admin controls

frontend/app/admin/page.tsx

@@ -1,347 +1,77 @@
 'use client'
 
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { authFetch, clearToken, getApiBase, getToken } from '../lib/auth'
+import { authFetch, getApiBase, getToken } from '../lib/auth'
 import AdminShell from '../ui/AdminShell'
+import { CONFIG_GROUPS, serviceStatusLabel } from './configNavigation'
 
-type ServiceState = {
-  name: string
-  status: string
-  message?: string
-}
-
-type RecentRequest = {
-  id: number
-  title?: string | null
-  year?: number | null
-  statusLabel?: string | null
-  requestedBy?: string | null
-  createdAt?: string | null
-}
-
-type PortalOverview = {
-  overview?: {
-    total_items?: number
-    total_comments?: number
-    by_kind?: Record<string, number>
-    by_status?: Record<string, number>
-  }
-  my_items?: number
-}
-
-const formatDateTime = (value?: string | null) => {
-  if (!value) return 'Unknown'
-  const date = new Date(value)
-  if (Number.isNaN(date.valueOf())) return value
-  return date.toLocaleString()
-}
-
-const normalizeRecent = (items: any[]): RecentRequest[] =>
-  items
-    .filter((item) => item?.id)
-    .map((item) => ({
-      id: Number(item.id),
-      title: item.title ?? null,
-      year: item.year ?? null,
-      statusLabel: item.statusLabel ?? null,
-      requestedBy: item.requestedBy ?? null,
-      createdAt: item.createdAt ?? null,
-    }))
+type ServiceState = { name: string; status: string }
 
 export default function AdminLandingPage() {
   const router = useRouter()
   const [services, setServices] = useState<ServiceState[]>([])
-  const [serviceOverall, setServiceOverall] = useState('unknown')
-  const [recent, setRecent] = useState<RecentRequest[]>([])
-  const [portalOverview, setPortalOverview] = useState<PortalOverview | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<string | null>(null)
-  const [serviceTesting, setServiceTesting] = useState<Record<string, boolean>>({})
-  const [serviceTestResults, setServiceTestResults] = useState<Record<string, string>>({})
-  const [serviceCheckedAt, setServiceCheckedAt] = useState<string | null>(null)
+  const [ready, setReady] = useState(false)
+  const [error, setError] = useState('')
 
   useEffect(() => {
-    if (!getToken()) {
-      router.push('/login')
-      return
-    }
-
+    let active = true
     const load = async () => {
-      setLoading(true)
-      setError(null)
+      if (!getToken()) { router.replace('/login'); return }
       try {
-        const baseUrl = getApiBase()
-        const [meResponse, serviceResponse, recentResponse, overviewResponse] = await Promise.all([
-          authFetch(`${baseUrl}/auth/me`),
-          authFetch(`${baseUrl}/status/services`),
-          authFetch(`${baseUrl}/requests/recent?take=8&days=0`),
-          authFetch(`${baseUrl}/portal/overview`),
-        ])
-
-        if (meResponse.status === 401) {
-          clearToken()
-          router.push('/login')
-          return
-        }
-        if (meResponse.status === 403) {
-          router.push('/')
-          return
-        }
-        const me = await meResponse.json()
-        if (me?.role !== 'admin') {
-          router.push('/')
-          return
-        }
-
-        if (serviceResponse.ok) {
-          const data = await serviceResponse.json()
-          setServiceOverall(data?.overall ?? 'unknown')
-          setServices(Array.isArray(data?.services) ? data.services : [])
-          setServiceCheckedAt(new Date().toISOString())
-        }
-
-        if (recentResponse.ok) {
-          const data = await recentResponse.json()
-          setRecent(Array.isArray(data?.results) ? normalizeRecent(data.results) : [])
-        }
-
-        if (overviewResponse.ok) {
-          const data = await overviewResponse.json()
-          setPortalOverview(data)
-        }
-      } catch (err) {
-        console.error(err)
-        setError('Unable to load the operations dashboard.')
-      } finally {
-        setLoading(false)
+        const response = await authFetch(`${getApiBase()}/auth/me`)
+        if (!response.ok) { router.replace('/login'); return }
+        if ((await response.json())?.role !== 'admin') { router.replace('/'); return }
+        if (!active) return
+        setReady(true)
+        const status = await authFetch(`${getApiBase()}/status/services`)
+        if (!status.ok) throw new Error('Status unavailable')
+        const data = await status.json()
+        if (active) setServices(Array.isArray(data.services) ? data.services : [])
+      } catch {
+        if (active) setError('Connection status is unavailable. Refresh the page to try again.')
       }
     }
-
     void load()
-
-    const refreshTimer = window.setInterval(async () => {
-      try {
-        const response = await authFetch(`${getApiBase()}/status/services`)
-        if (!response.ok) return
-        const data = await response.json()
-        setServiceOverall(data?.overall ?? 'unknown')
-        setServices(Array.isArray(data?.services) ? data.services : [])
-        setServiceCheckedAt(new Date().toISOString())
-      } catch (err) {
-        console.error(err)
-      }
-    }, 30_000)
-
-    return () => window.clearInterval(refreshTimer)
+    return () => { active = false }
   }, [router])
 
-  const testService = async (service: ServiceState) => {
-    const slug = service.name.toLowerCase().replace(/[^a-z0-9]/g, '')
-    setServiceTesting((current) => ({ ...current, [service.name]: true }))
-    setServiceTestResults((current) => {
-      const next = { ...current }
-      delete next[service.name]
-      return next
-    })
-    try {
-      const response = await authFetch(`${getApiBase()}/status/services/${slug}/test`, {
-        method: 'POST',
-      })
-      if (!response.ok) {
-        const text = await response.text()
-        throw new Error(text || `Service test failed: ${response.status}`)
-      }
-      const result = await response.json()
-      setServices((current) => current.map((item) =>
-        item.name === service.name
-          ? { ...item, status: result?.status ?? item.status, message: result?.message ?? item.message }
-          : item
-      ))
-      setServiceTestResults((current) => ({
-        ...current,
-        [service.name]: result?.message || (result?.status === 'up' ? 'Connection test passed.' : 'Connection test completed.'),
-      }))
-      setServiceCheckedAt(new Date().toISOString())
-    } catch (err) {
-      console.error(err)
-      setServiceTestResults((current) => ({ ...current, [service.name]: 'Connection test failed.' }))
-    } finally {
-      setServiceTesting((current) => ({ ...current, [service.name]: false }))
-    }
-  }
-
-  const serviceCounts = useMemo(() => {
-    const up = services.filter((service) => service.status === 'up').length
-    const down = services.filter((service) => service.status === 'down').length
-    const degraded = services.filter((service) => service.status === 'degraded').length
-    const notConfigured = services.filter((service) => service.status === 'not_configured').length
-    return { up, down, degraded, notConfigured, total: services.length }
-  }, [services])
-
-  const issueCount = Number(portalOverview?.overview?.by_kind?.issue ?? 0)
-  const requestItemCount = Number(portalOverview?.overview?.by_kind?.request ?? 0)
-  const commentCount = Number(portalOverview?.overview?.total_comments ?? 0)
-
-  const rail = (
-    <div className="admin-rail-stack">
-      <div className="admin-rail-card">
-        <span className="admin-rail-eyebrow">Fleet summary</span>
-        <h2>{serviceCounts.up} of {serviceCounts.total || 0} online</h2>
-        <p>
-          {serviceCounts.down + serviceCounts.degraded > 0
-            ? `${serviceCounts.down + serviceCounts.degraded} configured service${serviceCounts.down + serviceCounts.degraded === 1 ? '' : 's'} need attention.`
-            : 'No configured service is currently reporting a fault.'}
-        </p>
-        <a className="admin-rail-action" href="/admin/diagnostics">Open full diagnostics</a>
-      </div>
-      <div className="admin-rail-card">
-        <span className="admin-rail-eyebrow">Quick actions</span>
-        <div className="quick-action-grid">
-          <a href="/admin/requests-all">Review requests</a>
-          <a href="/admin/issues">Manage issues</a>
-          <a href="/users">User directory</a>
-          <a href="/admin/logs">Activity log</a>
-        </div>
-      </div>
-    </div>
-  )
-
   return (
-    <AdminShell
-      title="Admin overview"
-      subtitle="Service health, request movement, issue intake, and the controls that keep Magent running."
-      rail={rail}
-      actions={
-        <button type="button" onClick={() => router.push('/admin/diagnostics')}>
-          Run diagnostics
-        </button>
-      }
-    >
-      {loading ? <div className="status-banner">Loading operations dashboard...</div> : null}
-      {error ? <div className="error-banner">{error}</div> : null}
-
-      <section className="ops-metric-grid">
-        <div className="ops-metric-card">
-          <span className="section-kicker">Services online</span>
-          <strong>
-            {serviceCounts.up}/{serviceCounts.total || 0}
-          </strong>
-          <p>{serviceOverall === 'up' ? 'All configured services are responding.' : 'Some services need review.'}</p>
-        </div>
-        <div className="ops-metric-card">
-          <span className="section-kicker">Recent requests</span>
-          <strong>{recent.length}</strong>
-          <p>Loaded from the live request cache.</p>
-        </div>
-        <div className="ops-metric-card">
-          <span className="section-kicker">Open issue items</span>
-          <strong>{issueCount}</strong>
-          <p>{commentCount} portal comments recorded.</p>
-        </div>
-        <div className="ops-metric-card">
-          <span className="section-kicker">Portal requests</span>
-          <strong>{requestItemCount}</strong>
-          <p>Tracked in the dedicated request workflow.</p>
-        </div>
-      </section>
-
-      <section className="admin-zone fleet-status-panel">
-        <div className="section-header fleet-status-header">
-          <div>
-            <span className="section-kicker">Fleet service mesh</span>
-            <h2>System status</h2>
-            <p className="section-subtitle">
-              Admin-only connectivity status for the services used by Magent.
-              {serviceCheckedAt ? ` Last checked ${formatDateTime(serviceCheckedAt)}.` : ''}
-            </p>
-          </div>
-          <span className={`small-pill system-pill-${serviceOverall}`}>
-            {serviceOverall.replaceAll('_', ' ')}
-          </span>
-        </div>
-        {services.length === 0 ? (
-          <div className="status-banner">Service status is not available yet.</div>
-        ) : (
-          <div className="fleet-service-grid">
-            {services.map((service) => {
-              const slug = service.name.toLowerCase().replace(/[^a-z0-9]/g, '')
-              const testing = Boolean(serviceTesting[service.name])
-              return (
-                <article className={`fleet-service-card system-${service.status}`} key={service.name}>
-                  <div className="fleet-service-title">
-                    <span className="system-dot" aria-hidden="true" />
-                    <div>
-                      <h3>{service.name}</h3>
-                      <span className={`small-pill system-pill-${service.status}`}>
-                        {service.status.replaceAll('_', ' ')}
-                      </span>
-                    </div>
-                  </div>
-                  <p>{serviceTestResults[service.name] ?? service.message ?? 'No recent detail was returned.'}</p>
-                  <div className="fleet-service-actions">
-                    <a href={`/admin/${slug}`}>Configure</a>
-                    <button type="button" className="ghost-button" disabled={testing} onClick={() => void testService(service)}>
-                      {testing ? 'Testing...' : 'Test connection'}
-                    </button>
-                  </div>
-                </article>
-              )
-            })}
-          </div>
-        )}
-      </section>
-
-      <section className="admin-zone">
-        <div className="section-header">
-          <div>
-            <h2>Recent activity</h2>
-            <p className="section-subtitle">Live request cache entries, newest first.</p>
-          </div>
-        </div>
-        {recent.length === 0 ? (
-          <div className="status-banner">No recent requests were returned.</div>
-        ) : (
-          <div className="admin-table dashboard-activity-table">
-            <div className="admin-table-head">
-              <span>Request</span>
-              <span>Status</span>
-              <span>User</span>
-              <span>Created</span>
+    <AdminShell title="Settings" subtitle="Connections, access and the way Magent works.">
+      {!ready ? error ? <p className="error-banner" role="alert">{error}</p> : <p role="status">Loading settings…</p> : (
+        <div className="config-directory">
+          {error && <p className="error-banner" role="alert">{error}</p>}
+          {CONFIG_GROUPS.filter((group) => !group.advanced).map((group) => (
+            <section className="config-directory-region" key={group.title}>
+              <header><h2>{group.title}</h2><p>{group.description}</p></header>
+              <div className="config-directory-links">
+                {group.items.map((item) => {
+                  const service = services.find((entry) => entry.name.toLowerCase() === item.service?.toLowerCase())
+                  return (
+                    <a href={item.href} key={item.href} className="config-directory-link">
+                      <span className="config-link-icon" aria-hidden="true">{item.symbol}</span>
+                      <span className="config-link-copy"><strong>{item.label}</strong><small>{item.description}</small></span>
+                      {item.service && <span className={`config-connection-badge is-${service?.status ?? 'unknown'}`}>{serviceStatusLabel(service?.status)}</span>}
+                      <span className="config-link-arrow" aria-hidden="true">→</span>
+                    </a>
+                  )
+                })}
+              </div>
+            </section>
+          ))}
+          <details className="config-advanced-directory">
+            <summary><strong>Advanced tools</strong><span>Hosting, logs, caches and recovery</span></summary>
+            <div className="config-directory-links">
+              {CONFIG_GROUPS.filter((group) => group.advanced).flatMap((group) => group.items).map((item) => (
+                <a href={item.href} key={item.href} className="config-directory-link">
+                  <span className="config-link-copy"><strong>{item.label}</strong><small>{item.description}</small></span>
+                  <span className="config-link-arrow" aria-hidden="true">→</span>
+                </a>
+              ))}
             </div>
-            {recent.map((row) => (
-              <button
-                key={row.id}
-                type="button"
-                className="admin-table-row"
-                onClick={() => router.push(`/requests/${row.id}`)}
-              >
-                <span>
-                  {row.title || `Request #${row.id}`}
-                  {row.year ? ` (${row.year})` : ''}
-                </span>
-                <span>{row.statusLabel || 'Unknown'}</span>
-                <span>{row.requestedBy || 'Unknown'}</span>
-                <span>{formatDateTime(row.createdAt)}</span>
-              </button>
-            ))}
-          </div>
-        )}
-      </section>
-
-      <section className="admin-zone">
-        <div className="section-header">
-          <div>
-            <h2>Attention states</h2>
-            <p className="section-subtitle">Service states that affect request processing.</p>
-          </div>
+          </details>
         </div>
-        <div className="ops-status-strip">
-          <span>{serviceCounts.down} down</span>
-          <span>{serviceCounts.degraded} degraded</span>
-          <span>{serviceCounts.notConfigured} not configured</span>
-        </div>
-      </section>
+      )}
     </AdminShell>
   )
 }