update: Add Global Search on Header, Add Global Audit log for all actions.

frontend/src/assets/side-menu-icons/inventory.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="currentColor" height="800px" width="800px" version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	  viewBox="0 0 256 188" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M63,133c-13,0-23.5,10.5-23.5,23.5s10.5,23.5,23.5,23.5c13,0,23.5-10.5,23.5-23.5S76,133,63,133z M63,165.4
+				c-4.9,0-9-4.1-9-9c0-4.9,4.1-9,9-9c4.9,0,9,4.1,9,9C72,161.4,68,165.4,63,165.4z M210.8,132c-13,0-23.5,10.5-23.5,23.5
+				s10.5,23.5,23.5,23.5c13,0,23.5-10.5,23.5-23.5S223.8,132,210.8,132z M210.8,164.4c-4.9,0-9-4.1-9-9c0-4.9,4.1-9,9-9
+				c4.9,0,9,4.1,9,9C219.8,160.4,215.8,164.4,210.8,164.4z M-0.5,143.1c0,4.6,3.7,8.2,8.2,8.2h22.6c0.9,0,1.7-0.7,1.9-1.5
+				c2.6-14.7,15.4-24.9,30.8-24.9s28.3,10.2,30.8,24.9c0.2,0.9,0.9,1.5,1.9,1.5H99h30.9V115H-0.5V143.1z M253.6,134.5h-5v-22
+				c0-7.5-6.1-13.6-13.7-13.6h-24.3c-0.5,0-1-0.3-1.4-0.6l-38-37c-1.7-1.7-4.1-2.7-6.6-2.8h-27.5v92.8h40.9c0.9,0,1.7-0.7,1.9-1.5
+				c2.6-14.7,15.4-25.9,30.8-25.9s28.3,11.2,30.8,25.9c0.2,0.9,0.9,1.5,1.9,1.5h3.2c4.9,0,8.7-3.9,8.7-8.7v-6.3
+				C255.5,135.4,254.6,134.5,253.6,134.5z M191.1,99h-41.4c-1,0-1.9-0.9-1.9-1.9V70.7c0-1,0.9-1.9,1.9-1.9h13.9c0.5,0,1,0.3,1.5,0.6
+				l27.5,26.3C193.5,97,192.7,99,191.1,99z"/>
+		</g>
+	</g>
+</g>
+<path d="M57.8,101.5H17.1V60.8h15.7v13h9.3v-13h15.7V101.5z M110.9,101.5H70.3V60.8H86v13h9.3v-13h15.7V101.5z M84.7,48.3H44V7.6
+	h15.7v13H69v-13h15.7V48.3z"/>
+</svg>

frontend/src/components/layout/Header.jsx

@@ -44,7 +44,7 @@ const STATIC_LABELS = {
   staff:             'Staff',
   sn:                'S/N Manager',
   'staff-log':       'Staff Log',
-  'serial-logs':     'Log Viewer',
+  'audit-log':       'Log Viewer',
   'public-features': 'Public Features',
 }
 
@@ -282,8 +282,9 @@ const SETTINGS_ITEMS = [
     ),
   },
   {
-    to: '/settings/serial-logs',
+    to: '/settings/audit-log',
     label: 'Log Viewer',
+    sysadminOnly: true,
     icon: (
       <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
         <rect x="2" y="2" width="12" height="12" rx="1.5"/>
@@ -304,7 +305,7 @@ const SETTINGS_ITEMS = [
   },
 ]
 
-function SettingsMenu({ onClose }) {
+function SettingsMenu({ onClose, isSysadmin }) {
   const navigate = useNavigate()
 
   useEffect(() => {
@@ -342,7 +343,7 @@ function SettingsMenu({ onClose }) {
       }}>
         Console Settings
       </div>
-      {SETTINGS_ITEMS.map((item) => (
+      {SETTINGS_ITEMS.filter((item) => !item.sysadminOnly || isSysadmin).map((item) => (
         <button
           key={item.to}
           type="button"
@@ -397,7 +398,6 @@ function SettingsMenu({ onClose }) {
 
 export default function Header({ onMenuOpen }) {
   const { user, logout, hasRole } = useAuth()
-  const [search, setSearch] = useState('')
   const [profileOpen, setProfileOpen] = useState(false)
   const [settingsOpen, setSettingsOpen] = useState(false)
   const profileRef = useRef(null)
@@ -448,7 +448,7 @@ export default function Header({ onMenuOpen }) {
       <div className="header-right">
 
         <div className="header-search">
-          <HeaderSearch value={search} onChange={setSearch} placeholder="Search…" />
+          <HeaderSearch placeholder="Search…" />
         </div>
 
         <button type="button" className="header-icon-btn" aria-label="Notifications">
@@ -469,7 +469,7 @@ export default function Header({ onMenuOpen }) {
               <GearIcon />
             </button>
             {settingsOpen && (
-              <SettingsMenu onClose={() => setSettingsOpen(false)} />
+              <SettingsMenu onClose={() => setSettingsOpen(false)} isSysadmin={hasRole('sysadmin')} />
             )}
           </div>
         )}

frontend/src/components/layout/Sidebar.jsx

@@ -1,20 +1,40 @@
 // frontend/src/components/layout/Sidebar.jsx
 // Primary navigation sidebar — 224px wide, fixed, full height.
-//
-// Visual style (matches Stitch reference):
-//   - Brand header with logo at top
-//   - Section labels: plain uppercase text, generous padding, no rule lines
-//   - Nav items: px-6 py-3, full width, 3px left bar + primary-subtle bg when active
-//   - Collapsible groups: same row height as nav items
-//   - Children: darker inset bg, deep left-indent, text-color hover
-//   - Console Settings: pinned at bottom
 
 import { useState } from 'react'
 import { NavLink, useLocation } from 'react-router-dom'
 import { useAuth } from '@/hooks/useAuth'
 import logoDark from '@/assets/logos/bell_systems_horizontal_darkMode.png'
 
-// ─── Icon set ─────────────────────────────────────────────────────────────────
+// ─── SVG file icons (vite-plugin-svgr v4 — ?react query) ─────────────────────
+
+import IcoDevices          from '@/assets/side-menu-icons/devices.svg?react'
+import IcoDeviceOverview   from '@/assets/side-menu-icons/device-overview.svg?react'
+import IcoFleet            from '@/assets/side-menu-icons/fleet.svg?react'
+import IcoBlackbox         from '@/assets/side-menu-icons/blackbox.svg?react'
+import IcoMelodies         from '@/assets/side-menu-icons/melodies.svg?react'
+import IcoMelodiesEditor   from '@/assets/side-menu-icons/melodies-editor.svg?react'
+import IcoComposer         from '@/assets/side-menu-icons/composer.svg?react'
+import IcoArchetypes       from '@/assets/side-menu-icons/archetypes.svg?react'
+import IcoMelodySettings   from '@/assets/side-menu-icons/melody-settings.svg?react'
+import IcoCommunications   from '@/assets/side-menu-icons/communications.svg?react'
+import IcoWhatsapp         from '@/assets/side-menu-icons/whatsapp.svg?react'
+import IcoSms              from '@/assets/side-menu-icons/sms.svg?react'
+import IcoHelpdesk         from '@/assets/side-menu-icons/helpdesk.svg?react'
+import IcoCommsLog         from '@/assets/side-menu-icons/communications-log.svg?react'
+import IcoCustomers        from '@/assets/side-menu-icons/customers.svg?react'
+import IcoCustomerOverview from '@/assets/side-menu-icons/customer-overview.svg?react'
+import IcoOrders           from '@/assets/side-menu-icons/orders.svg?react'
+import IcoProducts         from '@/assets/side-menu-icons/products.svg?react'
+import IcoCatalog          from '@/assets/side-menu-icons/product-catalog.svg?react'
+import IcoSnManager        from '@/assets/side-menu-icons/sn-manager.svg?react'
+import IcoManufacturing    from '@/assets/side-menu-icons/manufacturing.svg?react'
+import IcoInventory        from '@/assets/side-menu-icons/inventory.svg?react'
+import IcoProvisioning     from '@/assets/side-menu-icons/provision.svg?react'
+import IcoFirmware         from '@/assets/side-menu-icons/firmware.svg?react'
+import IcoApi              from '@/assets/side-menu-icons/api.svg?react'
+
+// ─── Inline-only icons (no SVG file equivalent) ───────────────────────────────
 
 const S = ({ children, ...p }) => (
   <svg
@@ -29,38 +49,50 @@ const S = ({ children, ...p }) => (
   </svg>
 )
 
+// Wrapper to normalise imported SVG file components to 16×16
+function SvgIcon({ Component }) {
+  return (
+    <Component
+      width="16" height="16"
+      aria-hidden="true" focusable="false"
+      style={{ flexShrink: 0 }}
+    />
+  )
+}
+
 const Icons = {
   dashboard:        () => <S><rect x="2" y="2" width="5" height="5" rx="1"/><rect x="9" y="2" width="5" height="5" rx="1"/><rect x="2" y="9" width="5" height="5" rx="1"/><rect x="9" y="9" width="5" height="5" rx="1"/></S>,
-  devices:          () => <S><rect x="2" y="3" width="12" height="8" rx="1.5"/><path d="M5 14h6M8 11v3"/></S>,
-  deviceOverview:   () => <S><circle cx="8" cy="6" r="3"/><path d="M3 13c0-2.76 2.24-5 5-5s5 2.24 5 5"/></S>,
-  fleet:            () => <S><path d="M2 5h12M2 8h9M2 11h6"/></S>,
+  devices:          () => <SvgIcon Component={IcoDevices} />,
+  deviceOverview:   () => <SvgIcon Component={IcoDeviceOverview} />,
+  fleet:            () => <SvgIcon Component={IcoFleet} />,
   commandCenter:    () => <S><rect x="2" y="2" width="12" height="12" rx="1.5"/><path d="M5 6l2 2-2 2M9 10h2"/></S>,
-  blackBox:         () => <S><rect x="2" y="4" width="12" height="8" rx="1"/><path d="M5 8h6"/></S>,
+  blackBox:         () => <SvgIcon Component={IcoBlackbox} />,
+  deviceSettings:   () => <SvgIcon Component={IcoMelodySettings} />,
   appUsers:         () => <S><circle cx="6" cy="5" r="2.5"/><path d="M2 13c0-2.2 1.8-4 4-4"/><circle cx="12" cy="7" r="2"/><path d="M9.5 13c0-1.65 1.12-3 2.5-3s2.5 1.35 2.5 3"/></S>,
-  melodies:         () => <S><path d="M9 3v7"/><path d="M9 3l4-1v7"/><circle cx="7" cy="10" r="2"/><circle cx="11" cy="9" r="2"/></S>,
-  library:          () => <S><rect x="2" y="2" width="4" height="12" rx="1"/><rect x="7" y="4" width="4" height="10" rx="1"/><rect x="12" y="2" width="2" height="12" rx="1"/></S>,
-  composer:         () => <S><path d="M2 12L10 4l2 2-8 8H2v-2z"/><path d="M8 6l2 2"/></S>,
-  archetypes:       () => <S><path d="M8 2l2 4h4l-3 3 1 4-4-2.5L4 13l1-4-3-3h4z"/></S>,
-  melodySettings:   () => <S><path d="M2 4h2"/><path d="M6 4h8"/><circle cx="5" cy="4" r="1.5" fill="currentColor" stroke="none"/><path d="M2 8h6"/><path d="M10 8h4"/><circle cx="9" cy="8" r="1.5" fill="currentColor" stroke="none"/><path d="M2 12h9"/><path d="M13 12h1"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/></S>,
-  communications:   () => <S><path d="M2 3h12v8H2z"/><path d="M5 14l3-3 3 3"/></S>,
+  melodies:         () => <SvgIcon Component={IcoMelodies} />,
+  library:          () => <SvgIcon Component={IcoMelodiesEditor} />,
+  composer:         () => <SvgIcon Component={IcoComposer} />,
+  archetypes:       () => <SvgIcon Component={IcoArchetypes} />,
+  melodySettings:   () => <SvgIcon Component={IcoMelodySettings} />,
+  communications:   () => <SvgIcon Component={IcoCommunications} />,
   mail:             () => <S><rect x="2" y="4" width="12" height="9" rx="1"/><path d="M2 5l6 4 6-4"/></S>,
-  whatsapp:         () => <S><path d="M8 2a6 6 0 0 1 6 6c0 3.31-2.69 6-6 6a5.97 5.97 0 0 1-3.1-.86L2 14l.86-2.9A5.97 5.97 0 0 1 2 8a6 6 0 0 1 6-6z"/></S>,
-  sms:              () => <S><path d="M2 3h12v8H8l-3 2.5V11H2z"/></S>,
-  helpdesk:         () => <S><path d="M8 2a4 4 0 0 0-4 4c0 1.5.82 2.8 2 3.46V11h4V9.46A4 4 0 0 0 8 2z"/><path d="M6 13h4"/><path d="M8 11v2"/></S>,
-  commsLog:         () => <S><circle cx="8" cy="8" r="6"/><path d="M8 5v3l2 2"/></S>,
-  customers:        () => <S><rect x="3" y="2" width="10" height="7" rx="1"/><path d="M1 14c0-2.76 3.13-5 7-5s7 2.24 7 5"/></S>,
-  customerOverview: () => <S><path d="M2 12l3-5 3 3 2-4 4 6"/></S>,
-  orders:           () => <S><rect x="3" y="2" width="10" height="12" rx="1"/><path d="M6 6h4M6 9h4M6 12h2"/></S>,
+  whatsapp:         () => <SvgIcon Component={IcoWhatsapp} />,
+  sms:              () => <SvgIcon Component={IcoSms} />,
+  helpdesk:         () => <SvgIcon Component={IcoHelpdesk} />,
+  commsLog:         () => <SvgIcon Component={IcoCommsLog} />,
+  customers:        () => <SvgIcon Component={IcoCustomers} />,
+  customerOverview: () => <SvgIcon Component={IcoCustomerOverview} />,
+  orders:           () => <SvgIcon Component={IcoOrders} />,
   quotations:       () => <S><rect x="3" y="2" width="10" height="12" rx="1"/><path d="M6 5h4M6 8h3M9 11l1-1 1 1 1-3"/></S>,
-  products:         () => <S><path d="M8 2L2 5v6l6 3 6-3V5z"/><path d="M8 2v9M2 5l6 3 6-3"/></S>,
-  catalog:          () => <S><rect x="2" y="2" width="5" height="5" rx="1"/><rect x="9" y="2" width="5" height="5" rx="1"/><rect x="2" y="9" width="5" height="5" rx="1"/><rect x="9" y="9" width="5" height="5" rx="1"/></S>,
-  snManager:        () => <S><rect x="2" y="5" width="12" height="6" rx="1"/><path d="M4 8h1M6 8h1M8 8h1M10 8h1"/></S>,
+  products:         () => <SvgIcon Component={IcoProducts} />,
+  catalog:          () => <SvgIcon Component={IcoCatalog} />,
+  snManager:        () => <SvgIcon Component={IcoSnManager} />,
   staffLog:         () => <S><rect x="4" y="2" width="8" height="2" rx="1"/><rect x="2" y="3" width="12" height="11" rx="1"/><path d="M5 8h6M5 11h4"/></S>,
-  manufacturing:    () => <S><path d="M2 12l3-6 3 3 2-5 4 8H2z"/><circle cx="5" cy="5" r="1.5"/></S>,
-  inventory:        () => <S><rect x="2" y="7" width="5" height="7" rx="1"/><rect x="5.5" y="4" width="5" height="10" rx="1"/><rect x="9" y="2" width="5" height="12" rx="1"/></S>,
-  provisioning:     () => <S><path d="M8 2v8"/><path d="M5 8l3 3 3-3"/><path d="M3 13h10"/></S>,
-  firmware:         () => <S><rect x="3" y="4" width="10" height="8" rx="1"/><path d="M6 7h4M7 10h2"/><path d="M6 2h4M6 14h4"/></S>,
-  api:              () => <S><path d="M4 6l-2 2 2 2M12 6l2 2-2 2M9 4l-2 8"/></S>,
+  manufacturing:    () => <SvgIcon Component={IcoManufacturing} />,
+  inventory:        () => <SvgIcon Component={IcoInventory} />,
+  provisioning:     () => <SvgIcon Component={IcoProvisioning} />,
+  firmware:         () => <SvgIcon Component={IcoFirmware} />,
+  api:              () => <SvgIcon Component={IcoApi} />,
   settings:         () => <S><circle cx="8" cy="8" r="2.5"/><path d="M8 2v1.5M8 12.5V14M2 8h1.5M12.5 8H14M3.5 3.5l1 1M11.5 11.5l1 1M3.5 12.5l1-1M11.5 4.5l1-1"/></S>,
   staff:            () => <S><circle cx="8" cy="5" r="3"/><path d="M2 14c0-3.31 2.69-6 6-6s6 2.69 6 6"/></S>,
   publicFeatures:   () => <S><path d="M2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8z"/><path d="M8 2a9 9 0 0 0 0 12M8 2a9 9 0 0 1 0 12M2 8h12"/></S>,
@@ -99,7 +131,7 @@ const navSections = [
       { to: '/devices',           label: 'Fleet',           icon: 'fleet',           exact: true },
       { to: '/mqtt/commands',     label: 'Command Center',  icon: 'commandCenter' },
       { to: '/equipment/notes',   label: 'BlackBox',        icon: 'blackBox' },
-      { to: '/devices/settings',  label: 'Device Settings', icon: 'settings',        placeholder: true },
+      { to: '/devices/settings',  label: 'Device Settings', icon: 'deviceSettings',  placeholder: true },
     ],
   },
   { to: '/users', label: 'App Users', icon: 'appUsers', permission: 'app_users' },
@@ -117,11 +149,11 @@ const navSections = [
   {
     label: 'Communications', icon: 'communications', permission: 'crm',
     children: [
-      { to: '/mail',           label: 'Mailbox',   icon: 'mail' },
-      { to: '/comms/whatsapp', label: 'WhatsApp',  icon: 'whatsapp',  placeholder: true },
-      { to: '/comms/sms',      label: 'SMS',       icon: 'sms',       placeholder: true },
-      { to: '/crm/comms/helpdesk', label: 'Helpdesk',  icon: 'helpdesk', exact: true },
-      { to: '/crm/comms',      label: 'Comms Log', icon: 'commsLog', exact: true },
+      { to: '/mail',                label: 'Mailbox',   icon: 'mail' },
+      { to: '/comms/whatsapp',      label: 'WhatsApp',  icon: 'whatsapp',  placeholder: true },
+      { to: '/comms/sms',           label: 'SMS',       icon: 'sms',       placeholder: true },
+      { to: '/crm/comms/helpdesk',  label: 'Helpdesk',  icon: 'helpdesk',  exact: true },
+      { to: '/crm/comms',           label: 'Comms Log', icon: 'commsLog',  exact: true },
     ],
   },
   {
@@ -225,7 +257,7 @@ function CollapsibleGroup({ label, icon, children, currentPath, locked, open, on
                 end={child.exact === true}
                 className={({ isActive }) => `nav-child-link${isActive ? ' active' : ''}`}
               >
-                {({ isActive }) => {
+                {() => {
                   const ChildIcon = Icons[child.icon] ?? Icons.placeholder
                   return (
                     <>
@@ -274,7 +306,7 @@ export default function Sidebar() {
         <img
           src={logoDark}
           alt="BellSystems"
-          style={{ height: '18px', width: 'auto', objectFit: 'contain' }}
+          className="sidebar-brand-logo"
         />
       </div>
 

frontend/src/components/ui/HeaderSearch.jsx

@@ -1,22 +1,47 @@
 // frontend/src/components/ui/HeaderSearch.jsx
-// Minimal pill-shaped search input for the top bar.
-//
-// Intentionally different from <SearchBar>:
-//   - Background: --color-bg-surface (not abyss/elevated)
-//   - Shape: fully pill-rounded (--radius-full)
-//   - No border, no shadow, no focus ring outline — purely minimal
-//
-// Props:
-//   value       — string   — controlled value
-//   onChange    — fn(str)  — called on every keystroke
-//   placeholder — string   — defaults to "Search…"
+// Global search bar for the top header.
+// Debounces 500ms → GET /api/search?q= → floating results panel.
+
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import api from '@/lib/api'
+
+import IcoDevices   from '@/assets/side-menu-icons/devices.svg?react'
+import IcoCustomers from '@/assets/side-menu-icons/customers.svg?react'
+import IcoProducts  from '@/assets/side-menu-icons/products.svg?react'
+import IcoMelodies  from '@/assets/side-menu-icons/melodies.svg?react'
+
+// App Users has no sidebar SVG file — keep inline
+function IcoUsers() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
+      stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
+      aria-hidden="true" focusable="false"
+    >
+      <circle cx="6" cy="5" r="2.5" />
+      <path d="M2 13c0-2.2 1.8-4 4-4" />
+      <circle cx="12" cy="7" r="2" />
+      <path d="M9.5 13c0-1.65 1.12-3 2.5-3s2.5 1.35 2.5 3" />
+    </svg>
+  )
+}
+
+// ─── Type config ──────────────────────────────────────────────────────────────
+
+const TYPE_META = {
+  device:   { label: 'Devices',   accent: 'var(--color-info)',    Icon: IcoDevices   },
+  user:     { label: 'Users',     accent: 'var(--color-success)', Icon: IcoUsers     },
+  customer: { label: 'Customers', accent: 'var(--color-primary)', Icon: IcoCustomers },
+  product:  { label: 'Products',  accent: 'var(--color-warning)', Icon: IcoProducts  },
+  melody:   { label: 'Melodies',  accent: '#f0c040',              Icon: IcoMelodies  },
+}
+
+// ─── Search / spinner icons ───────────────────────────────────────────────────
 
 function SearchIcon() {
   return (
-    <svg
-      width="13" height="13" viewBox="0 0 13 13"
-      fill="none" stroke="currentColor"
-      strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"
+    <svg width="13" height="13" viewBox="0 0 13 13" fill="none"
+      stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"
       aria-hidden="true" focusable="false"
     >
       <circle cx="5.5" cy="5.5" r="4" />
@@ -25,22 +50,195 @@ function SearchIcon() {
   )
 }
 
-export default function HeaderSearch({ value, onChange, placeholder = 'Search…' }) {
+function SpinnerIcon() {
   return (
-    <div className="v2-topbar-search">
+    <svg width="13" height="13" viewBox="0 0 13 13" fill="none"
+      stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"
+      aria-hidden="true" focusable="false"
+      style={{ animation: 'spin 0.7s linear infinite' }}
+    >
+      <circle cx="6.5" cy="6.5" r="4" strokeOpacity="0.25" />
+      <path d="M6.5 2.5a4 4 0 0 1 4 4" />
+    </svg>
+  )
+}
+
+// ─── Result item ──────────────────────────────────────────────────────────────
+
+function ResultItem({ result, isActive, onMouseEnter, onMouseLeave, onClick }) {
+  const meta = TYPE_META[result.type] || { label: result.type, accent: 'var(--color-text-muted)', Icon: null }
+  const { Icon, accent } = meta
+
+  return (
+    <button
+      type="button"
+      className={`gs-result-item${isActive ? ' gs-result-item--active' : ''}`}
+      style={{ '--gs-accent': accent }}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onClick={onClick}
+      tabIndex={-1}
+    >
+      <span
+        className="gs-result-icon"
+        style={{ color: accent, backgroundColor: `color-mix(in srgb, ${accent} 12%, transparent)` }}
+      >
+        {Icon && <Icon width="14" height="14" aria-hidden="true" focusable="false" style={{ flexShrink: 0 }} />}
+      </span>
+
+      <span className="gs-result-body">
+        <span className="gs-result-label">{result.label}</span>
+        {result.sublabel && (
+          <span className="gs-result-sublabel">{result.sublabel}</span>
+        )}
+      </span>
+    </button>
+  )
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export default function HeaderSearch({ placeholder = 'Search…' }) {
+  const [query, setQuery] = useState('')
+  const [results, setResults] = useState([])
+  const [loading, setLoading] = useState(false)
+  const [open, setOpen] = useState(false)
+  const [activeIdx, setActiveIdx] = useState(-1)
+
+  const navigate = useNavigate()
+  const wrapRef = useRef(null)
+  const inputRef = useRef(null)
+  const debounceRef = useRef(null)
+  const requestIdRef = useRef(0)
+
+  useEffect(() => {
+    clearTimeout(debounceRef.current)
+    const q = query.trim()
+    if (q.length < 2) {
+      setResults([])
+      setLoading(false)
+      setOpen(false)
+      setActiveIdx(-1)
+      return
+    }
+    setLoading(true)
+    const reqId = ++requestIdRef.current
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const data = await api.get(`/search?q=${encodeURIComponent(q)}`)
+        if (reqId !== requestIdRef.current) return
+        setResults(data.results || [])
+        setOpen(true)
+        setActiveIdx(-1)
+      } catch {
+        if (reqId === requestIdRef.current) setResults([])
+      } finally {
+        if (reqId === requestIdRef.current) setLoading(false)
+      }
+    }, 500)
+    return () => clearTimeout(debounceRef.current)
+  }, [query])
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (e) => {
+      if (!wrapRef.current?.contains(e.target)) {
+        setOpen(false)
+        setActiveIdx(-1)
+      }
+    }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  const navigateTo = useCallback((url) => {
+    setOpen(false)
+    setQuery('')
+    setResults([])
+    setActiveIdx(-1)
+    navigate(url)
+  }, [navigate])
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      setOpen(false)
+      setQuery('')
+      setActiveIdx(-1)
+      return
+    }
+    if (!open || !results.length) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.min(i + 1, results.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActiveIdx((i) => Math.max(i - 1, -1))
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      if (activeIdx >= 0 && results[activeIdx]) navigateTo(results[activeIdx].url)
+    }
+  }
+
+  const grouped = results.reduce((acc, r, i) => {
+    if (!acc[r.type]) acc[r.type] = []
+    acc[r.type].push({ ...r, _idx: i })
+    return acc
+  }, {})
+
+  const isEmpty = open && !loading && results.length === 0 && query.trim().length >= 2
+
+  return (
+    <div className="v2-topbar-search" ref={wrapRef}>
       <span className="v2-topbar-search-icon">
-        <SearchIcon />
+        {loading ? <SpinnerIcon /> : <SearchIcon />}
       </span>
       <input
+        ref={inputRef}
         type="search"
         className="v2-topbar-search-input"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onFocus={() => { if (results.length > 0) setOpen(true) }}
         placeholder={placeholder}
         aria-label={placeholder}
         autoComplete="off"
         spellCheck={false}
       />
+
+      {(open || isEmpty) && (
+        <div className="gs-dropdown" role="listbox">
+          {isEmpty ? (
+            <div className="gs-empty">
+              <span className="gs-empty-icon"><SearchIcon /></span>
+              <span>No results for <em>&ldquo;{query.trim()}&rdquo;</em></span>
+            </div>
+          ) : (
+            Object.entries(grouped).map(([type, items], groupIdx) => {
+              const meta = TYPE_META[type] || { label: type, accent: 'var(--color-text-muted)' }
+              return (
+                <div key={type} className="gs-group">
+                  {groupIdx > 0 && <div className="gs-divider" />}
+                  <div className="gs-group-header" style={{ color: meta.accent }}>
+                    {meta.label}
+                    <span className="gs-group-count">{items.length}</span>
+                  </div>
+                  {items.map((r) => (
+                    <ResultItem
+                      key={`${r.type}-${r.id}`}
+                      result={r}
+                      isActive={r._idx === activeIdx}
+                      onMouseEnter={() => setActiveIdx(r._idx)}
+                      onMouseLeave={() => setActiveIdx(-1)}
+                      onClick={() => navigateTo(r.url)}
+                    />
+                  ))}
+                </div>
+              )
+            })
+          )}
+        </div>
+      )}
     </div>
   )
 }

frontend/src/pages/bellcloud/devices/DeviceDetail.jsx

@@ -299,6 +299,7 @@ export default function DeviceDetail() {
     onEditBacklight:       () => setEditingBacklight(true),
     onEditSubscription:    () => setEditingSubscription(true),
     onEditWarranty:        () => setEditingWarranty(true),
+    onNavigateToManage:    () => handleTabChange('manage'),
   }
 
   // ── Render ─────────────────────────────────────────────────────────────────

frontend/src/pages/bellcloud/devices/tabs/ManageTab.jsx

@@ -431,97 +431,7 @@ export default function ManageTab({ device, canEdit, deviceUsers: propUsers, use
           </div>
         </GlassCard>
 
-        {/* ── 2. DEVICE NOTES ───────────────────────────────────────────────── */}
-        <GlassCard>
-          <CardHeader
-            label="Device Notes"
-            count={notes.length || undefined}
-            action={canEdit && (
-              <Button variant="secondary" size="sm" onClick={() => setNoteModal({ open: true, note: null })}>
-                + Add Note
-              </Button>
-            )}
-          />
-
-          <div style={{ padding: notesLoading || notes.length === 0 ? 0 : 'var(--space-4) var(--space-5)' }}>
-            {notesLoading ? (
-              <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-8)' }}>
-                <Spinner size="sm" />
-              </div>
-            ) : notes.length === 0 ? (
-              <EmptySlate
-                icon={
-                  <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-                    <polyline points="14 2 14 8 20 8"/>
-                    <line x1="16" y1="13" x2="8" y2="13"/>
-                    <line x1="16" y1="17" x2="8" y2="17"/>
-                    <polyline points="10 9 9 9 8 9"/>
-                  </svg>
-                }
-                message="No notes recorded for this device yet."
-                action={canEdit && (
-                  <Button variant="secondary" size="sm" onClick={() => setNoteModal({ open: true, note: null })}>
-                    Add first note
-                  </Button>
-                )}
-              />
-            ) : (
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 'var(--space-3)' }}>
-                {notes.map(note => (
-                  <div
-                    key={note.id}
-                    className="manage-note-card"
-                    style={{
-                      display: 'flex', flexDirection: 'column', gap: 'var(--space-3)',
-                      padding: 'var(--space-4)',
-                      borderRadius: 'var(--radius-lg)',
-                      background: GLASS_INNER,
-                      border: '1px solid var(--color-border)',
-                      boxShadow: 'var(--shadow-sm)',
-                    }}
-                  >
-                    <p style={{ margin: 0, fontSize: 'var(--font-size-sm)', color: 'var(--color-text-primary)', lineHeight: 1.6, whiteSpace: 'pre-wrap', flex: 1 }}>
-                      {note.content || '—'}
-                    </p>
-                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-2)' }}>
-                      <div style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }}>
-                        <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)' }} title={fmtDateMedium(note.created_at)}>
-                          {fmtRelative(note.created_at)}
-                        </span>
-                        {note.created_by && (
-                          <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                            {note.created_by}
-                          </span>
-                        )}
-                      </div>
-                      {canEdit && (
-                        <div style={{ display: 'flex', gap: 'var(--space-1)', flexShrink: 0 }}>
-                          <button onClick={() => setNoteModal({ open: true, note })} title="Edit note" aria-label="Edit note"
-                            style={{ width: 26, height: 26, borderRadius: 'var(--radius-sm)', border: '1px solid transparent', background: 'none', color: 'var(--color-text-muted)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'color 0.12s, background 0.12s, border-color 0.12s' }}
-                            onMouseEnter={e => { e.currentTarget.style.color = 'var(--color-primary)'; e.currentTarget.style.background = 'var(--color-primary-subtle)'; e.currentTarget.style.borderColor = 'rgba(192,193,255,0.25)' }}
-                            onMouseLeave={e => { e.currentTarget.style.color = 'var(--color-text-muted)'; e.currentTarget.style.background = 'none'; e.currentTarget.style.borderColor = 'transparent' }}
-                          >
-                            <Icon name="edit" size={13} />
-                          </button>
-                          <button onClick={() => setConfirmDeleteNote(note)} title="Delete note" aria-label="Delete note"
-                            style={{ width: 26, height: 26, borderRadius: 'var(--radius-sm)', border: '1px solid transparent', background: 'none', color: 'var(--color-text-muted)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'color 0.12s, background 0.12s, border-color 0.12s' }}
-                            onMouseEnter={e => { e.currentTarget.style.color = 'var(--color-danger)'; e.currentTarget.style.background = 'var(--color-danger-bg)'; e.currentTarget.style.borderColor = 'var(--color-danger)' }}
-                            onMouseLeave={e => { e.currentTarget.style.color = 'var(--color-text-muted)'; e.currentTarget.style.background = 'none'; e.currentTarget.style.borderColor = 'transparent' }}
-                          >
-                            <Icon name="delete" size={13} />
-                          </button>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </GlassCard>
-
-        {/* ── 3. LINKED ISSUES ──────────────────────────────────────────────── */}
+        {/* ── 2. LINKED ISSUES ──────────────────────────────────────────────── */}
         <GlassCard>
           <CardHeader
             label="Linked Issues"
@@ -605,6 +515,96 @@ export default function ManageTab({ device, canEdit, deviceUsers: propUsers, use
           </div>
         </GlassCard>
 
+        {/* ── 3. DEVICE NOTES ───────────────────────────────────────────────── */}
+        <GlassCard>
+          <CardHeader
+            label="Device Notes"
+            count={notes.length || undefined}
+            action={canEdit && (
+              <Button variant="secondary" size="sm" onClick={() => setNoteModal({ open: true, note: null })}>
+                + Add Note
+              </Button>
+            )}
+          />
+
+          <div style={{ padding: notesLoading || notes.length === 0 ? 0 : 'var(--space-4) var(--space-5)' }}>
+            {notesLoading ? (
+              <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-8)' }}>
+                <Spinner size="sm" />
+              </div>
+            ) : notes.length === 0 ? (
+              <EmptySlate
+                icon={
+                  <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                    <polyline points="14 2 14 8 20 8"/>
+                    <line x1="16" y1="13" x2="8" y2="13"/>
+                    <line x1="16" y1="17" x2="8" y2="17"/>
+                    <polyline points="10 9 9 9 8 9"/>
+                  </svg>
+                }
+                message="No notes recorded for this device yet."
+                action={canEdit && (
+                  <Button variant="secondary" size="sm" onClick={() => setNoteModal({ open: true, note: null })}>
+                    Add first note
+                  </Button>
+                )}
+              />
+            ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
+                {notes.map(note => (
+                  <div
+                    key={note.id}
+                    className="manage-note-card"
+                    style={{
+                      display: 'flex', flexDirection: 'column', gap: 'var(--space-3)',
+                      padding: 'var(--space-4)',
+                      borderRadius: 'var(--radius-lg)',
+                      background: GLASS_INNER,
+                      border: '1px solid var(--color-border)',
+                      boxShadow: 'var(--shadow-sm)',
+                    }}
+                  >
+                    <p style={{ margin: 0, fontSize: 'var(--font-size-sm)', color: 'var(--color-text-primary)', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>
+                      {note.content || '—'}
+                    </p>
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-2)' }}>
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }}>
+                        <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)' }} title={fmtDateMedium(note.created_at)}>
+                          {fmtRelative(note.created_at)}
+                        </span>
+                        {note.created_by && (
+                          <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                            {note.created_by}
+                          </span>
+                        )}
+                      </div>
+                      {canEdit && (
+                        <div style={{ display: 'flex', gap: 'var(--space-1)', flexShrink: 0 }}>
+                          <button onClick={() => setNoteModal({ open: true, note })} title="Edit note" aria-label="Edit note"
+                            style={{ width: 26, height: 26, borderRadius: 'var(--radius-sm)', border: '1px solid transparent', background: 'none', color: 'var(--color-text-muted)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'color 0.12s, background 0.12s, border-color 0.12s' }}
+                            onMouseEnter={e => { e.currentTarget.style.color = 'var(--color-primary)'; e.currentTarget.style.background = 'var(--color-primary-subtle)'; e.currentTarget.style.borderColor = 'rgba(192,193,255,0.25)' }}
+                            onMouseLeave={e => { e.currentTarget.style.color = 'var(--color-text-muted)'; e.currentTarget.style.background = 'none'; e.currentTarget.style.borderColor = 'transparent' }}
+                          >
+                            <Icon name="edit" size={13} />
+                          </button>
+                          <button onClick={() => setConfirmDeleteNote(note)} title="Delete note" aria-label="Delete note"
+                            style={{ width: 26, height: 26, borderRadius: 'var(--radius-sm)', border: '1px solid transparent', background: 'none', color: 'var(--color-text-muted)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'color 0.12s, background 0.12s, border-color 0.12s' }}
+                            onMouseEnter={e => { e.currentTarget.style.color = 'var(--color-danger)'; e.currentTarget.style.background = 'var(--color-danger-bg)'; e.currentTarget.style.borderColor = 'var(--color-danger)' }}
+                            onMouseLeave={e => { e.currentTarget.style.color = 'var(--color-text-muted)'; e.currentTarget.style.background = 'none'; e.currentTarget.style.borderColor = 'transparent' }}
+                          >
+                            <Icon name="delete" size={13} />
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </GlassCard>
+
       </div>
 
       {/* ── Modals ─────────────────────────────────────────────────────────── */}

frontend/src/pages/bellcloud/devices/tabs/OverviewTab.jsx

@@ -168,6 +168,7 @@ export default function OverviewTab({
   setStaffNotes,
   deviceUsers,
   usersLoading,
+  onNavigateToManage,
 }) {
   const navigate  = useNavigate()
   const { toast } = useToast()
@@ -242,8 +243,27 @@ export default function OverviewTab({
 
   useEffect(() => { loadNotes() }, [loadNotes])
 
+  const [issues, setIssues]             = useState([])
+  const [issuesLoading, setIssuesLoading] = useState(false)
+
+  const loadIssues = useCallback(async () => {
+    if (!id) return
+    setIssuesLoading(true)
+    try {
+      const data = await api.get(`/notes/by-entity/device/${id}`)
+      setIssues(Array.isArray(data) ? data : [])
+    } catch {
+      setIssues([])
+    } finally {
+      setIssuesLoading(false)
+    }
+  }, [id])
+
+  useEffect(() => { loadIssues() }, [loadIssues])
+
   const [noteModal,  setNoteModal]  = useState({ open: false })
   const [issueModal, setIssueModal] = useState({ open: false, entry: null })
+  const [viewNote,   setViewNote]   = useState(null)
 
   const handleNoteSaved = () => {
     setNoteModal({ open: false })
@@ -252,6 +272,7 @@ export default function OverviewTab({
 
   const handleIssueSaved = () => {
     setIssueModal({ open: false, entry: null })
+    loadIssues()
   }
 
   // ── Live logs ─────────────────────────────────────────────────────────────
@@ -708,7 +729,7 @@ export default function OverviewTab({
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-3)' }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
               <SectionLabel>Issues &amp; Notes</SectionLabel>
-              {notes.length > 0 && (
+              {(notes.length + issues.length) > 0 && (
                 <span style={{
                   fontSize: 'var(--font-size-xs)',
                   color: 'var(--color-text-muted)',
@@ -717,22 +738,28 @@ export default function OverviewTab({
                   borderRadius: 'var(--radius-full)',
                   border: '1px solid var(--color-border)',
                 }}>
-                  {notes.length}
+                  {notes.length + issues.length}
                 </span>
               )}
             </div>
-            {canEdit && (
-              <div style={{ display: 'flex', gap: 'var(--space-2)', flexShrink: 0 }}>
-                <Button variant="ghost" size="sm" icon={<Icon name="plus" size={12} />} onClick={() => setNoteModal({ open: true })}>
-                  Add Note
-                </Button>
-                <Button variant="ghost" size="sm" icon={<Icon name="plus" size={12} />} onClick={() => setIssueModal({ open: true, entry: null })}>
-                  Record Issue
-                </Button>
-              </div>
-            )}
+            <div style={{ display: 'flex', gap: 'var(--space-2)', flexShrink: 0 }}>
+              {canEdit && (
+                <>
+                  <Button variant="ghost" size="sm" icon={<Icon name="plus" size={12} />} onClick={() => setNoteModal({ open: true })}>
+                    Add Note
+                  </Button>
+                  <Button variant="ghost" size="sm" icon={<Icon name="plus" size={12} />} onClick={() => setIssueModal({ open: true, entry: null })}>
+                    Record Issue
+                  </Button>
+                </>
+              )}
+              <Button variant="ghost" size="sm" onClick={onNavigateToManage}>
+                Edit
+              </Button>
+            </div>
           </div>
 
+          {/* Notes */}
           <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
             {notesLoading ? (
               <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-4)' }}>
@@ -743,24 +770,42 @@ export default function OverviewTab({
                 No notes for this device.
               </p>
             ) : (
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 'var(--space-3)' }}>
+              <div style={{
+                display: 'grid',
+                gridTemplateColumns: notes.length === 1 ? '1fr' : notes.length === 2 ? '1fr 1fr' : 'repeat(3, 1fr)',
+                gap: 'var(--space-3)',
+              }}>
                 {notes.map((note, i) => (
                   <div
                     key={note.id || i}
+                    onClick={() => setViewNote(note)}
                     style={{
                       padding: 'var(--space-3)',
                       borderRadius: 'var(--radius-md)',
                       background: GLASS_INNER,
                       border: '1px solid var(--color-border)',
+                      cursor: 'pointer',
+                      transition: 'border-color 0.15s',
                     }}
+                    onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--color-border-strong)'}
+                    onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--color-border)'}
                   >
-                    <p style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-text-primary)', lineHeight: 1.5, marginBottom: note.created_at ? 'var(--space-2)' : 0 }}>
+                    <p style={{
+                      fontSize: 'var(--font-size-sm)',
+                      color: 'var(--color-text-primary)',
+                      lineHeight: 1.5,
+                      marginBottom: note.created_at ? 'var(--space-2)' : 0,
+                      overflow: 'hidden',
+                      display: '-webkit-box',
+                      WebkitLineClamp: 3,
+                      WebkitBoxOrient: 'vertical',
+                    }}>
                       {note.content || note.text || '—'}
                     </p>
                     {note.created_at && (
                       <p style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)' }}>
                         {fmtRelative(note.created_at)}
-                        {note.author_name ? ` · ${note.author_name}` : ''}
+                        {note.created_by ? ` · ${note.created_by}` : ''}
                       </p>
                     )}
                   </div>
@@ -768,6 +813,72 @@ export default function OverviewTab({
               </div>
             )}
           </div>
+
+          {/* Issues */}
+          {(issuesLoading || issues.length > 0) && (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)', borderTop: '1px solid var(--color-border)', paddingTop: 'var(--space-3)' }}>
+              <SectionLabel>Linked Issues</SectionLabel>
+              {issuesLoading ? (
+                <div style={{ display: 'flex', justifyContent: 'center', padding: 'var(--space-4)' }}>
+                  <Spinner size="sm" />
+                </div>
+              ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)' }}>
+                  {issues.map((issue, i) => {
+                    const statusColors = {
+                      open:        { color: 'var(--color-danger)',  bg: 'var(--color-danger-bg)'  },
+                      researching: { color: 'var(--color-warning)', bg: 'var(--color-warning-bg)' },
+                      resolved:    { color: 'var(--color-success)', bg: 'var(--color-success-bg)' },
+                    }
+                    const sc = statusColors[issue.status] || statusColors.open
+                    return (
+                      <div
+                        key={issue.id || i}
+                        onClick={() => setIssueModal({ open: true, entry: issue })}
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 'var(--space-3)',
+                          padding: 'var(--space-2) var(--space-3)',
+                          borderRadius: 'var(--radius-md)',
+                          background: GLASS_INNER,
+                          border: '1px solid var(--color-border)',
+                          cursor: 'pointer',
+                          transition: 'border-color 0.15s',
+                        }}
+                        onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--color-border-strong)'}
+                        onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--color-border)'}
+                      >
+                        <span style={{
+                          display: 'inline-flex', alignItems: 'center', gap: 5,
+                          padding: '2px 8px',
+                          borderRadius: 'var(--radius-full)',
+                          backgroundColor: sc.bg,
+                          border: `1px solid ${sc.color}33`,
+                          fontSize: 'var(--font-size-xs)',
+                          fontWeight: 'var(--font-weight-semibold)',
+                          color: sc.color,
+                          whiteSpace: 'nowrap',
+                          flexShrink: 0,
+                        }}>
+                          <span style={{ width: 5, height: 5, borderRadius: '50%', backgroundColor: sc.color, flexShrink: 0 }} />
+                          {issue.status || 'open'}
+                        </span>
+                        <span style={{ flex: 1, fontSize: 'var(--font-size-sm)', color: 'var(--color-text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                          {issue.title}
+                        </span>
+                        {issue.created_at && (
+                          <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)', whiteSpace: 'nowrap', flexShrink: 0 }}>
+                            {fmtRelative(issue.created_at)}
+                          </span>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          )}
         </GlassCard>
       </div>
 
@@ -1047,13 +1158,72 @@ export default function OverviewTab({
 
       <EntryFormModal
         open={issueModal.open}
-        entry={null}
+        entry={issueModal.entry}
         defaultType="issue"
-        prefilledLinks={[{ entity_type: 'device', entity_id: id, display_name: device?.device_name || sn, locked: true }]}
+        prefilledLinks={issueModal.entry ? undefined : [{ entity_type: 'device', entity_id: id, display_name: device?.device_name || sn, locked: true }]}
         knownEntities={id ? { [id]: device?.device_name || sn } : undefined}
         onClose={() => setIssueModal({ open: false, entry: null })}
         onSaved={handleIssueSaved}
       />
+
+      {/* ── Note full-view mini modal ──────────────────────────────────────── */}
+      {viewNote && (
+        <div
+          onClick={() => setViewNote(null)}
+          style={{
+            position: 'fixed', inset: 0, zIndex: 9999,
+            background: 'rgba(0,0,0,0.55)',
+            backdropFilter: 'blur(4px)',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            padding: 'var(--space-6)',
+          }}
+        >
+          <div
+            onClick={e => e.stopPropagation()}
+            style={{
+              background: 'var(--color-bg-card)',
+              border: '1px solid var(--color-border)',
+              borderRadius: 'var(--radius-xl)',
+              boxShadow: 'var(--shadow-xl)',
+              maxWidth: 560,
+              width: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 0,
+              overflow: 'hidden',
+            }}
+          >
+            <div style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+              padding: 'var(--space-4) var(--space-5)',
+              borderBottom: '1px solid var(--color-border)',
+            }}>
+              <SectionLabel>Note</SectionLabel>
+              <button
+                onClick={() => setViewNote(null)}
+                style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--color-text-muted)', display: 'flex', alignItems: 'center', padding: 4, borderRadius: 'var(--radius-sm)' }}
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
+                </svg>
+              </button>
+            </div>
+            <div style={{ padding: 'var(--space-5)', overflowY: 'auto', maxHeight: '60vh' }}>
+              <p style={{ margin: 0, fontSize: 'var(--font-size-sm)', color: 'var(--color-text-primary)', lineHeight: 1.7, whiteSpace: 'pre-wrap' }}>
+                {viewNote.content || viewNote.text || '—'}
+              </p>
+            </div>
+            {viewNote.created_at && (
+              <div style={{ padding: 'var(--space-3) var(--space-5)', borderTop: '1px solid var(--color-border)' }}>
+                <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)' }}>
+                  {fmtRelative(viewNote.created_at)}
+                  {viewNote.created_by ? ` · ${viewNote.created_by}` : ''}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   )
 }

frontend/src/pages/engineering/manufacturing/ProvisioningWizard.jsx

@@ -844,8 +844,8 @@ function StepFlash({ device, bespokeOverride, onFlashed }) {
         ? `/api/manufacturing/devices/${sn}/partitions.bin?hw_type_override=${bespokeOverride.hwFamily}`
         : `/api/manufacturing/devices/${sn}/partitions.bin`
       const nvsUrl = bespokeOverride
-        ? `/api/manufacturing/devices/${sn}/nvs.bin?hw_type_override=${bespokeOverride.hwFamily}&hw_revision_override=1.0&nvs_profile=${nvsProfile}`
-        : `/api/manufacturing/devices/${sn}/nvs.bin?nvs_profile=${nvsProfile}`
+        ? `/api/manufacturing/devices/${sn}/nvs.bin?hw_type_override=${bespokeOverride.hwFamily}&hw_revision_override=1.0&nvs_schema=${nvsProfile}`
+        : `/api/manufacturing/devices/${sn}/nvs.bin?nvs_schema=${nvsProfile}`
       const fwUrl = bespokeOverride
         ? `/api/firmware/bespoke/${bespokeOverride.firmware.channel}/${bespokeOverride.firmware.version}/firmware.bin`
         : `/api/manufacturing/devices/${sn}/firmware.bin`
@@ -1037,17 +1037,15 @@ function StepFlash({ device, bespokeOverride, onFlashed }) {
 
       {error && <div style={{ marginBottom: 'var(--space-3)' }}><ErrorBox msg={error} /></div>}
 
-      {/* Progress bars — shown while flashing */}
-      {(flashing || blProgress > 0) && (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', marginBottom: 'var(--space-3)' }}>
-          <div style={{ display: 'flex', gap: 'var(--space-4)' }}>
-            <ProgressBar flex label="Bootloader (0x1000)"      percent={blProgress} />
-            <ProgressBar flex label="Partition Table (0x8000)" percent={partProgress} />
-          </div>
-          <ProgressBar label="NVS (0x9000)"       percent={nvsProgress} />
-          <ProgressBar label="Firmware (0x10000)" percent={fwProgress} />
+      {/* Progress bars — always visible, idle at 0% */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', marginBottom: 'var(--space-3)' }}>
+        <div style={{ display: 'flex', gap: 'var(--space-4)' }}>
+          <ProgressBar flex label="Bootloader (0x1000)"      percent={blProgress} />
+          <ProgressBar flex label="Partition Table (0x8000)" percent={partProgress} />
         </div>
-      )}
+        <ProgressBar label="NVS (0x9000)"       percent={nvsProgress} />
+        <ProgressBar label="Firmware (0x10000)" percent={fwProgress} />
+      </div>
 
       {/* Spacer */}
       <div style={{ flex: 1 }} />
@@ -1109,7 +1107,7 @@ function StepFlash({ device, bespokeOverride, onFlashed }) {
       border: '1px solid var(--color-border)',
       overflow: 'hidden',
       display: 'flex', flexDirection: 'column',
-      height: 320,
+      minHeight: 320,
     }}>
       <div style={{
         padding: '8px 12px',

frontend/src/pages/settings/LogViewerPage.jsx

@@ -0,0 +1,754 @@
+// frontend/src/pages/settings/LogViewerPage.jsx
+// Audit log viewer — filterable, paginated, expandable rows.
+// Route: /settings/audit-log (wired in router/index.jsx)
+
+import { useState, useEffect, useCallback, useRef } from 'react'
+import api from '@/lib/api'
+import { useAuth } from '@/hooks/useAuth'
+import PageHeader from '@/components/ui/PageHeader'
+import StatusBadge from '@/components/ui/StatusBadge'
+import Spinner from '@/components/ui/Spinner'
+import Pagination from '@/components/ui/Pagination'
+import SearchBar from '@/components/ui/SearchBar'
+import Select from '@/components/ui/Select'
+import Button from '@/components/ui/Button'
+import { fmtDateTimeMedium } from '@/lib/formatters'
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const PAGE_SIZE = 50
+
+const ACTION_META = {
+  CREATE:           { label: 'Create',          variant: 'success' },
+  UPDATE:           { label: 'Update',          variant: 'info'    },
+  DELETE:           { label: 'Delete',          variant: 'danger'  },
+  COMMAND:          { label: 'Command',         variant: 'warning' },
+  PUBLISH:          { label: 'Publish',         variant: 'success' },
+  UNPUBLISH:        { label: 'Unpublish',       variant: 'neutral' },
+  LOGIN:            { label: 'Login',           variant: 'neutral' },
+  LOGOUT:           { label: 'Logout',          variant: 'neutral' },
+  PERMISSION_CHANGE:{ label: 'Permissions',     variant: 'warning' },
+  STATUS_CHANGE:    { label: 'Status Change',   variant: 'info'    },
+}
+
+const ENTITY_LABELS = {
+  customer:   'Customer',
+  order:      'Order',
+  device:     'Device',
+  melody:     'Melody',
+  product:    'Product',
+  staff:      'Staff',
+  ticket:     'Ticket',
+  note:       'Note',
+  quotation:  'Quotation',
+  firmware:   'Firmware',
+  archetype:  'Archetype',
+}
+
+const ACTION_OPTIONS = [
+  { value: '',                label: 'All Actions' },
+  { value: 'CREATE',          label: 'Create' },
+  { value: 'UPDATE',          label: 'Update' },
+  { value: 'DELETE',          label: 'Delete' },
+  { value: 'COMMAND',         label: 'Command' },
+  { value: 'PUBLISH',         label: 'Publish' },
+  { value: 'UNPUBLISH',       label: 'Unpublish' },
+  { value: 'LOGIN',           label: 'Login' },
+  { value: 'LOGOUT',          label: 'Logout' },
+  { value: 'PERMISSION_CHANGE', label: 'Permissions' },
+  { value: 'STATUS_CHANGE',   label: 'Status Change' },
+]
+
+const ENTITY_OPTIONS = [
+  { value: '', label: 'All Entities' },
+  ...Object.entries(ENTITY_LABELS).map(([k, v]) => ({ value: k, label: v })),
+]
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function actionMeta(action) {
+  return ACTION_META[action] ?? { label: action, variant: 'neutral' }
+}
+
+function buildParams({ actorId, action, entityType, fromDate, toDate, offset }) {
+  const p = new URLSearchParams()
+  if (actorId)    p.set('actor_id',    actorId)
+  if (action)     p.set('action',      action)
+  if (entityType) p.set('entity_type', entityType)
+  if (fromDate)   p.set('from_date',   new Date(fromDate).toISOString())
+  if (toDate)     p.set('to_date',     new Date(toDate + 'T23:59:59').toISOString())
+  p.set('limit',  String(PAGE_SIZE))
+  p.set('offset', String(offset))
+  return p.toString()
+}
+
+// ─── Changes diff renderer ────────────────────────────────────────────────────
+
+function ChangesDiff({ changes }) {
+  if (!changes || Object.keys(changes).length === 0) return null
+  return (
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'var(--space-1)',
+      marginTop: 'var(--space-3)',
+    }}>
+      <span style={{
+        fontSize: 'var(--font-size-xs)',
+        fontWeight: 'var(--font-weight-semibold)',
+        color: 'var(--color-text-muted)',
+        textTransform: 'uppercase',
+        letterSpacing: 'var(--tracking-wide)',
+        marginBottom: 'var(--space-1)',
+      }}>
+        Changes
+      </span>
+      {Object.entries(changes).map(([field, { old: oldVal, new: newVal }]) => (
+        <div key={field} style={{
+          display: 'grid',
+          gridTemplateColumns: '140px 1fr 1fr',
+          gap: 'var(--space-2)',
+          alignItems: 'start',
+          fontSize: 'var(--font-size-sm)',
+          padding: 'var(--space-2) var(--space-3)',
+          backgroundColor: 'var(--color-bg-abyss)',
+          borderRadius: 'var(--radius-sm)',
+        }}>
+          <span style={{
+            fontFamily: 'var(--font-family-mono)',
+            fontSize: 'var(--font-size-xs)',
+            color: 'var(--color-text-muted)',
+            wordBreak: 'break-all',
+          }}>
+            {field}
+          </span>
+          <span style={{
+            color: 'var(--color-danger)',
+            wordBreak: 'break-all',
+            fontFamily: oldVal !== null && typeof oldVal === 'string' ? undefined : 'var(--font-family-mono)',
+            fontSize: 'var(--font-size-xs)',
+          }}>
+            {oldVal === null || oldVal === undefined ? <em style={{ color: 'var(--color-text-muted)' }}>null</em> : String(oldVal)}
+          </span>
+          <span style={{
+            color: 'var(--color-success)',
+            wordBreak: 'break-all',
+            fontFamily: newVal !== null && typeof newVal === 'string' ? undefined : 'var(--font-family-mono)',
+            fontSize: 'var(--font-size-xs)',
+          }}>
+            {newVal === null || newVal === undefined ? <em style={{ color: 'var(--color-text-muted)' }}>null</em> : String(newVal)}
+          </span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+// ─── Meta renderer ────────────────────────────────────────────────────────────
+
+function MetaBlock({ meta }) {
+  if (!meta || Object.keys(meta).length === 0) return null
+  return (
+    <div style={{ marginTop: 'var(--space-3)' }}>
+      <span style={{
+        fontSize: 'var(--font-size-xs)',
+        fontWeight: 'var(--font-weight-semibold)',
+        color: 'var(--color-text-muted)',
+        textTransform: 'uppercase',
+        letterSpacing: 'var(--tracking-wide)',
+        display: 'block',
+        marginBottom: 'var(--space-1)',
+      }}>
+        Context
+      </span>
+      <div style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 'var(--space-2)',
+      }}>
+        {Object.entries(meta).map(([k, v]) => (
+          <span key={k} style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 'var(--space-1)',
+            fontSize: 'var(--font-size-xs)',
+            padding: '2px var(--space-2)',
+            backgroundColor: 'var(--color-bg-abyss)',
+            borderRadius: 'var(--radius-sm)',
+            color: 'var(--color-text-secondary)',
+          }}>
+            <span style={{ color: 'var(--color-text-muted)', fontFamily: 'var(--font-family-mono)' }}>{k}</span>
+            <span style={{ color: 'var(--color-text-muted)' }}>·</span>
+            <span style={{ fontFamily: 'var(--font-family-mono)' }}>{String(v)}</span>
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ─── Row ──────────────────────────────────────────────────────────────────────
+
+function LogRow({ entry, isExpanded, onToggle }) {
+  const { label, variant } = actionMeta(entry.action)
+  const entityLabel = ENTITY_LABELS[entry.entity_type] ?? entry.entity_type
+  const hasDetail = (entry.changes && Object.keys(entry.changes).length > 0)
+    || (entry.meta && Object.keys(entry.meta).length > 0)
+
+  return (
+    <>
+      <tr
+        className={`log-row${isExpanded ? ' log-row--expanded' : ''}${hasDetail ? ' log-row--clickable' : ''}`}
+        onClick={hasDetail ? onToggle : undefined}
+        style={{ cursor: hasDetail ? 'pointer' : 'default' }}
+      >
+        {/* Timestamp */}
+        <td className="log-cell log-cell--ts">
+          <span style={{
+            fontFamily: 'var(--font-family-mono)',
+            fontSize: 'var(--font-size-xs)',
+            color: 'var(--color-text-muted)',
+            whiteSpace: 'nowrap',
+          }}>
+            {fmtDateTimeMedium(entry.occurred_at)}
+          </span>
+        </td>
+
+        {/* Actor */}
+        <td className="log-cell">
+          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+            <div style={{
+              width: 24,
+              height: 24,
+              borderRadius: 'var(--radius-full)',
+              background: 'var(--color-primary-subtle)',
+              border: '1px solid rgba(192,193,255,0.12)',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+              fontFamily: 'var(--font-family-display)',
+              fontWeight: 'var(--font-weight-semibold)',
+              fontSize: '10px',
+              color: 'var(--color-primary)',
+              letterSpacing: '0.02em',
+            }}>
+              {entry.actor_name?.charAt(0)?.toUpperCase() ?? '?'}
+            </div>
+            <span style={{
+              fontSize: 'var(--font-size-sm)',
+              color: 'var(--color-text-primary)',
+              fontWeight: 'var(--font-weight-medium)',
+            }}>
+              {entry.actor_name}
+            </span>
+          </div>
+        </td>
+
+        {/* Action badge */}
+        <td className="log-cell">
+          <StatusBadge variant={variant}>{label}</StatusBadge>
+        </td>
+
+        {/* Entity */}
+        <td className="log-cell">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <span style={{
+              fontSize: 'var(--font-size-xs)',
+              color: 'var(--color-text-muted)',
+              textTransform: 'uppercase',
+              letterSpacing: 'var(--tracking-wide)',
+              fontWeight: 'var(--font-weight-semibold)',
+            }}>
+              {entityLabel}
+            </span>
+            {entry.entity_label && (
+              <span style={{
+                fontSize: 'var(--font-size-sm)',
+                color: 'var(--color-text-primary)',
+                fontWeight: 'var(--font-weight-medium)',
+              }}>
+                {entry.entity_label}
+              </span>
+            )}
+          </div>
+        </td>
+
+        {/* Entity ID */}
+        <td className="log-cell log-cell--id">
+          <span style={{
+            fontFamily: 'var(--font-family-mono)',
+            fontSize: 'var(--font-size-xs)',
+            color: 'var(--color-text-muted)',
+          }}>
+            {entry.entity_id?.length > 16
+              ? entry.entity_id.slice(0, 8) + '…' + entry.entity_id.slice(-4)
+              : entry.entity_id}
+          </span>
+        </td>
+
+        {/* Expand chevron */}
+        <td className="log-cell log-cell--expand" style={{ textAlign: 'right', width: 32 }}>
+          {hasDetail && (
+            <svg
+              width="12" height="12" viewBox="0 0 12 12" fill="none"
+              stroke="currentColor" strokeWidth="1.8"
+              strokeLinecap="round" strokeLinejoin="round"
+              aria-hidden="true"
+              style={{
+                display: 'block',
+                marginLeft: 'auto',
+                color: 'var(--color-text-muted)',
+                transform: isExpanded ? 'rotate(180deg)' : 'none',
+                transition: 'transform 150ms ease',
+              }}
+            >
+              <path d="M2 4l4 4 4-4" />
+            </svg>
+          )}
+        </td>
+      </tr>
+
+      {/* Expanded detail row */}
+      {isExpanded && hasDetail && (
+        <tr className="log-row-detail">
+          <td colSpan={6} style={{ padding: 0 }}>
+            <div style={{
+              padding: 'var(--space-4) var(--space-6)',
+              backgroundColor: 'var(--color-bg-void)',
+              borderBottom: '1px solid var(--color-border)',
+            }}>
+              <ChangesDiff changes={entry.changes} />
+              <MetaBlock meta={entry.meta} />
+            </div>
+          </td>
+        </tr>
+      )}
+    </>
+  )
+}
+
+// ─── Skeleton ─────────────────────────────────────────────────────────────────
+
+function SkeletonRows() {
+  return Array.from({ length: 10 }).map((_, i) => (
+    <tr key={i} className="log-row">
+      {[140, 120, 80, 140, 100, 24].map((w, j) => (
+        <td key={j} className="log-cell">
+          <div style={{
+            height: 14,
+            width: w,
+            maxWidth: '100%',
+            borderRadius: 'var(--radius-sm)',
+            backgroundColor: 'var(--color-bg-elevated)',
+            opacity: 0.6,
+          }} />
+        </td>
+      ))}
+    </tr>
+  ))
+}
+
+// ─── Filters bar ──────────────────────────────────────────────────────────────
+
+function FiltersBar({ filters, setFilters, staffList, onReset }) {
+  const hasFilters = filters.actorId || filters.action || filters.entityType
+    || filters.fromDate || filters.toDate
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      gap: 'var(--space-3)',
+    }}>
+      {/* Actor / staff member */}
+      <div style={{ minWidth: 160 }}>
+        <Select
+          value={filters.actorId}
+          onChange={(e) => setFilters(f => ({ ...f, actorId: e.target.value, offset: 0 }))}
+          placeholder="All Staff"
+        >
+          <option value="">All Staff</option>
+          {staffList.map(s => (
+            <option key={s.id} value={s.id}>{s.name}</option>
+          ))}
+        </Select>
+      </div>
+
+      {/* Action */}
+      <div style={{ minWidth: 140 }}>
+        <Select
+          value={filters.action}
+          onChange={(e) => setFilters(f => ({ ...f, action: e.target.value, offset: 0 }))}
+          placeholder="All Actions"
+        >
+          {ACTION_OPTIONS.map(o => (
+            <option key={o.value} value={o.value}>{o.label}</option>
+          ))}
+        </Select>
+      </div>
+
+      {/* Entity type */}
+      <div style={{ minWidth: 140 }}>
+        <Select
+          value={filters.entityType}
+          onChange={(e) => setFilters(f => ({ ...f, entityType: e.target.value, offset: 0 }))}
+          placeholder="All Entities"
+        >
+          {ENTITY_OPTIONS.map(o => (
+            <option key={o.value} value={o.value}>{o.label}</option>
+          ))}
+        </Select>
+      </div>
+
+      {/* Date range */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+        <input
+          type="date"
+          value={filters.fromDate}
+          onChange={(e) => setFilters(f => ({ ...f, fromDate: e.target.value, offset: 0 }))}
+          aria-label="From date"
+          className="log-date-input"
+        />
+        <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)' }}>–</span>
+        <input
+          type="date"
+          value={filters.toDate}
+          onChange={(e) => setFilters(f => ({ ...f, toDate: e.target.value, offset: 0 }))}
+          aria-label="To date"
+          className="log-date-input"
+        />
+      </div>
+
+      {/* Reset */}
+      {hasFilters && (
+        <Button variant="ghost" size="sm" onClick={onReset}>
+          Clear filters
+        </Button>
+      )}
+    </div>
+  )
+}
+
+// ─── Summary stats ────────────────────────────────────────────────────────────
+
+function StatPill({ label, value, variant }) {
+  const colors = {
+    success: 'var(--color-success)',
+    danger:  'var(--color-danger)',
+    warning: 'var(--color-warning)',
+    info:    'var(--color-info)',
+    neutral: 'var(--color-text-muted)',
+  }
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      gap: 'var(--space-2)',
+      padding: 'var(--space-2) var(--space-3)',
+      backgroundColor: 'var(--color-bg-surface)',
+      border: '1px solid var(--color-border)',
+      borderRadius: 'var(--radius-md)',
+      minWidth: 80,
+    }}>
+      <span style={{
+        width: 6,
+        height: 6,
+        borderRadius: 'var(--radius-full)',
+        backgroundColor: colors[variant] ?? colors.neutral,
+        flexShrink: 0,
+      }} />
+      <span style={{
+        fontSize: 'var(--font-size-xs)',
+        color: 'var(--color-text-muted)',
+        textTransform: 'uppercase',
+        letterSpacing: 'var(--tracking-wide)',
+        fontWeight: 'var(--font-weight-semibold)',
+      }}>
+        {label}
+      </span>
+      <span style={{
+        fontSize: 'var(--font-size-sm)',
+        fontWeight: 'var(--font-weight-semibold)',
+        color: 'var(--color-text-primary)',
+        fontFamily: 'var(--font-family-mono)',
+        marginLeft: 'auto',
+      }}>
+        {value}
+      </span>
+    </div>
+  )
+}
+
+// ─── Main page ────────────────────────────────────────────────────────────────
+
+const INITIAL_FILTERS = {
+  actorId:    '',
+  action:     '',
+  entityType: '',
+  fromDate:   '',
+  toDate:     '',
+  offset:     0,
+}
+
+export default function LogViewerPage() {
+  const { user } = useAuth()
+
+  const [entries,    setEntries]    = useState([])
+  const [loading,    setLoading]    = useState(true)
+  const [error,      setError]      = useState(null)
+  const [total,      setTotal]      = useState(null)
+  const [staffList,  setStaffList]  = useState([])
+  const [filters,    setFilters]    = useState(INITIAL_FILTERS)
+  const [expandedId, setExpandedId] = useState(null)
+  const [stats,      setStats]      = useState(null)
+
+  // Derived pagination
+  const page      = Math.floor(filters.offset / PAGE_SIZE) + 1
+  const pageCount = total != null ? Math.ceil(total / PAGE_SIZE) : 0
+
+  // Load staff list once for the actor dropdown
+  useEffect(() => {
+    api.get('/staff').then(data => {
+      setStaffList((data.staff ?? data ?? []).map(s => ({ id: s.id, name: s.name })))
+    }).catch(() => {})
+  }, [])
+
+  // Load entries whenever filters change
+  const fetchEntries = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    setExpandedId(null)
+    try {
+      const qs = buildParams(filters)
+      const data = await api.get(`/audit-log?${qs}`)
+      const rows = data.entries ?? []
+      setEntries(rows)
+
+      // The API doesn't return total — fetch count via a separate offset-trick:
+      // if we got a full page, there may be more; signal unknown total for now.
+      setTotal(null)
+
+      // Build quick stats from current page
+      const actionCounts = {}
+      rows.forEach(r => { actionCounts[r.action] = (actionCounts[r.action] ?? 0) + 1 })
+      setStats(actionCounts)
+    } catch (err) {
+      setError(err?.message ?? 'Failed to load audit log.')
+    } finally {
+      setLoading(false)
+    }
+  }, [filters])
+
+  useEffect(() => { fetchEntries() }, [fetchEntries])
+
+  function handleReset() {
+    setFilters(INITIAL_FILTERS)
+  }
+
+  function toggleExpand(id) {
+    setExpandedId(prev => prev === id ? null : id)
+  }
+
+  // ── Render states ────────────────────────────────────────────────────────
+
+  const isEmpty = !loading && !error && entries.length === 0
+
+  return (
+    <>
+      <style>{`
+        .log-row {
+          border-bottom: 1px solid var(--color-border);
+          transition: background-color 80ms;
+        }
+        .log-row:hover {
+          background-color: var(--color-bg-elevated);
+        }
+        .log-row--expanded {
+          background-color: var(--color-bg-elevated);
+        }
+        .log-row--clickable:hover {
+          background-color: var(--color-bg-island);
+        }
+        .log-row-detail {
+          background-color: var(--color-bg-void);
+        }
+        .log-cell {
+          padding: var(--space-3) var(--space-4);
+          vertical-align: middle;
+        }
+        .log-cell--ts {
+          width: 148px;
+          white-space: nowrap;
+        }
+        .log-cell--id {
+          width: 120px;
+        }
+        .log-cell--expand {
+          width: 40px;
+          padding-right: var(--space-4);
+        }
+        .log-table {
+          width: 100%;
+          border-collapse: collapse;
+          table-layout: fixed;
+        }
+        .log-table thead th {
+          padding: var(--space-2) var(--space-4);
+          text-align: left;
+          font-size: var(--font-size-xs);
+          font-weight: var(--font-weight-semibold);
+          color: var(--color-text-muted);
+          text-transform: uppercase;
+          letter-spacing: var(--tracking-wide);
+          border-bottom: 1px solid var(--color-border-strong);
+          white-space: nowrap;
+          background-color: var(--color-bg-void);
+        }
+        .log-date-input {
+          height: 32px;
+          padding: 0 var(--space-3);
+          background-color: var(--color-bg-abyss);
+          border: 1px solid var(--color-border);
+          border-radius: var(--radius-md);
+          color: var(--color-text-primary);
+          font-size: var(--font-size-sm);
+          font-family: var(--font-family-base);
+          outline: none;
+          transition: border-color 150ms;
+          color-scheme: dark;
+        }
+        .log-date-input:focus {
+          border-color: var(--color-border-focus);
+          box-shadow: var(--shadow-focus);
+        }
+        .log-date-input::-webkit-calendar-picker-indicator {
+          filter: invert(0.6);
+          cursor: pointer;
+        }
+      `}</style>
+
+      <div className="page-wrapper">
+        <PageHeader
+          title="Log Viewer"
+          subtitle="Staff actions and system events across the console"
+        />
+
+        {/* ── Stats strip ─────────────────────────────────────────────── */}
+        {stats && Object.keys(stats).length > 0 && (
+          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)' }}>
+            {Object.entries(stats)
+              .sort((a, b) => b[1] - a[1])
+              .map(([action, count]) => {
+                const { label, variant } = actionMeta(action)
+                return <StatPill key={action} label={label} value={count} variant={variant} />
+              })}
+          </div>
+        )}
+
+        {/* ── Filters ──────────────────────────────────────────────────── */}
+        <FiltersBar
+          filters={filters}
+          setFilters={setFilters}
+          staffList={staffList}
+          onReset={handleReset}
+        />
+
+        {/* ── Table ────────────────────────────────────────────────────── */}
+        <div style={{
+          backgroundColor: 'var(--color-bg-surface)',
+          border: '1px solid var(--color-border)',
+          borderRadius: 'var(--radius-lg)',
+          overflow: 'hidden',
+          boxShadow: 'var(--shadow-card)',
+        }}>
+          <table className="log-table" aria-label="Audit log">
+            <thead>
+              <tr>
+                <th style={{ width: 148 }}>Timestamp</th>
+                <th style={{ width: 160 }}>Staff</th>
+                <th style={{ width: 110 }}>Action</th>
+                <th>Entity</th>
+                <th style={{ width: 120 }}>ID</th>
+                <th style={{ width: 40 }} />
+              </tr>
+            </thead>
+            <tbody>
+              {loading ? (
+                <SkeletonRows />
+              ) : error ? (
+                <tr>
+                  <td colSpan={6} style={{ padding: 'var(--space-12)', textAlign: 'center' }}>
+                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-3)' }}>
+                      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ color: 'var(--color-danger)', opacity: 0.7 }}>
+                        <circle cx="12" cy="12" r="10" />
+                        <path d="M12 8v4M12 16h.01" />
+                      </svg>
+                      <p style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-danger)' }}>{error}</p>
+                      <Button variant="ghost" size="sm" onClick={fetchEntries}>Retry</Button>
+                    </div>
+                  </td>
+                </tr>
+              ) : isEmpty ? (
+                <tr>
+                  <td colSpan={6} style={{ padding: 'var(--space-12)', textAlign: 'center' }}>
+                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-3)' }}>
+                      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ color: 'var(--color-text-muted)' }}>
+                        <rect x="3" y="3" width="18" height="18" rx="2" />
+                        <path d="M8 9h8M8 13h5" />
+                      </svg>
+                      <p style={{ fontSize: 'var(--font-size-base)', color: 'var(--color-text-muted)' }}>
+                        No entries match these filters
+                      </p>
+                      <Button variant="ghost" size="sm" onClick={handleReset}>
+                        Clear filters
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              ) : (
+                entries.map(entry => (
+                  <LogRow
+                    key={entry.id}
+                    entry={entry}
+                    isExpanded={expandedId === entry.id}
+                    onToggle={() => toggleExpand(entry.id)}
+                  />
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        {/* ── Pagination ────────────────────────────────────────────────── */}
+        {!loading && !error && entries.length > 0 && (
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-4)' }}>
+            <span style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-text-muted)' }}>
+              Showing {filters.offset + 1}–{filters.offset + entries.length}
+              {entries.length === PAGE_SIZE && ' · more available'}
+            </span>
+            <div style={{ display: 'flex', gap: 'var(--space-2)' }}>
+              <Button
+                variant="secondary"
+                size="sm"
+                disabled={filters.offset === 0}
+                onClick={() => setFilters(f => ({ ...f, offset: Math.max(0, f.offset - PAGE_SIZE) }))}
+              >
+                ← Previous
+              </Button>
+              <Button
+                variant="secondary"
+                size="sm"
+                disabled={entries.length < PAGE_SIZE}
+                onClick={() => setFilters(f => ({ ...f, offset: f.offset + PAGE_SIZE }))}
+              >
+                Next →
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}

frontend/src/router/index.jsx

@@ -31,6 +31,7 @@ import StaffList              from '@/pages/settings/staff/StaffList'
 import StaffDetail            from '@/pages/settings/staff/StaffDetail'
 import StaffForm              from '@/pages/settings/staff/StaffForm'
 import PublicFeaturesSettings from '@/pages/settings/PublicFeaturesSettings'
+import LogViewerPage         from '@/pages/settings/LogViewerPage'
 import AutomationsPage        from '@/pages/settings/automations/AutomationsPage'
 import ApiReferencePage        from '@/pages/engineering/developer/ApiReferencePage'
 import CustomerList            from '@/pages/crm/customers/CustomerList'
@@ -194,7 +195,7 @@ export default function V2Router() {
         <Route path="settings/staff/:id/edit" element={<RoleGate roles={['sysadmin', 'admin']}><StaffForm /></RoleGate>} />
         <Route path="settings/public-features" element={<RoleGate roles={['sysadmin', 'admin']}><PublicFeaturesSettings /></RoleGate>} />
         <Route path="settings/automations"    element={<RoleGate roles={['sysadmin', 'admin']}><AutomationsPage /></RoleGate>} />
-        <Route path="settings/serial-logs" element={<RoleGate roles={['sysadmin', 'admin']}><ComingSoon /></RoleGate>} />
+        <Route path="settings/audit-log" element={<RoleGate roles={['sysadmin']}><LogViewerPage /></RoleGate>} />
 
         {/* Catch-all */}
         <Route path="*" element={<Navigate to="/" replace />} />

frontend/src/styles/components.css

@@ -40,6 +40,10 @@
   from { transform: scaleX(1); }
   to   { transform: scaleX(0); }
 }
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
 
 /* ==========================================================================
    BUTTON  (.btn)
@@ -1819,6 +1823,13 @@ tr:focus-within .btn-table-actions {
   flex-shrink: 0;
 }
 
+.sidebar-brand-logo {
+  width: 100%;
+  height: auto;
+  display: block;
+  object-fit: contain;
+}
+
 /* Sidebar scrollable nav area */
 .sidebar-nav {
   flex: 1;
@@ -2223,6 +2234,159 @@ tr:focus-within .btn-table-actions {
   appearance: none;
 }
 
+/* ─── Global search dropdown ─────────────────────────────────────────────── */
+
+.gs-dropdown {
+  position: absolute;
+  top: calc(100% + var(--space-2));
+  left: 50%;
+  transform: translateX(-50%);
+  width: 572px;
+  max-height: 520px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: var(--color-bg-void);
+  border: 1px solid var(--color-border-strong);
+  border-radius: var(--radius-lg);
+  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 9999;
+  padding: var(--space-3);
+  animation: slide-up 0.14s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Section grouping */
+.gs-group {
+  padding-bottom: var(--space-1);
+}
+
+.gs-group-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3) var(--space-1);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  opacity: 0.75;
+}
+
+.gs-group-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: 10px;
+  font-weight: var(--font-weight-semibold);
+  background: var(--color-bg-elevated);
+  color: var(--color-text-muted);
+  border-radius: var(--radius-full);
+  line-height: 1;
+}
+
+.gs-divider {
+  height: 1px;
+  background: var(--color-border);
+  margin: var(--space-2) 0;
+}
+
+/* Result item — 2-row card */
+.gs-result-item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 0.1s ease;
+  min-width: 0;
+}
+
+.gs-result-item--active::before {
+  content: '';
+  position: absolute;
+  inset: 0% 0%;
+  background: var(--gs-accent, var(--color-text-muted));
+  border-radius: 0%;
+  filter: blur(8px);
+  opacity: 0.10;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.gs-result-item > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Icon chip */
+.gs-result-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius-md);
+}
+
+/* Text block — stacked 2 rows */
+.gs-result-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.gs-result-label {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.3;
+}
+
+.gs-result-sublabel {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.4;
+  font-family: var(--font-family-mono);
+  letter-spacing: 0.01em;
+}
+
+/* Empty state */
+.gs-empty {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4) var(--space-3);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-muted);
+}
+
+.gs-empty-icon {
+  flex-shrink: 0;
+  opacity: 0.4;
+  display: flex;
+}
+
+.gs-empty em {
+  font-style: normal;
+  color: var(--color-text-secondary);
+}
+
 /* Icon buttons: bell, gear */
 .header-icon-btn {
   display: flex;