refactor(nav): adopt PageHeader on /configuration-items

The page was rendering its own sticky <header> on top of the global
AppNavigation, which obscured the top nav and duplicated the
ThemeToggle and a redundant "Back to Dashboard" link.

Replace with PageHeader (title, description, breadcrumbs, actions slot
holding Refresh / Bulk-admin / Export) and switch the main container to
the conventional px-6 py-6.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/configuration-items/page.tsx

@@ -24,7 +24,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { CompanySelectorEnhanced } from '@/components/companies/company-selector-enhanced';
-import { ThemeToggle } from '@/components/theme-toggle';
+import { PageHeader } from '@/components/navigation/page-header';
 import { ConfigItemModal } from '@/components/configuration-items/config-item-modal';
 import { ContactCell } from '@/components/configuration-items/contact-cell';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
@@ -59,7 +59,6 @@ import {
   Calendar as CalendarIcon,
   Hash,
   Building2,
-  ArrowLeft,
   Filter,
   ArrowUpDown,
   ArrowUp,
@@ -520,66 +519,46 @@ function ConfigurationItemsContent() {
   };
 
   return (
-    <div className="min-h-screen bg-background">
-      {/* Header */}
-      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container flex h-16 items-center">
-          <div className="flex flex-1 items-center justify-between">
-            <div className="flex items-center space-x-4">
-              <Button variant="ghost" size="sm" asChild>
-                <a href="/">
-                  <ArrowLeft className="w-4 h-4 mr-2" />
-                  Back to Dashboard
-                </a>
-              </Button>
-              <div className="flex items-center space-x-3">
-                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-purple-600 to-purple-700 text-white shadow-lg">
-                  <Server className="h-5 w-5" />
-                </div>
-                <div>
-                  <h1 className="text-xl font-semibold tracking-tight">
-                    Configuration Items
-                  </h1>
-                  <p className="text-xs text-muted-foreground">Autotask & RMM Device Management</p>
-                </div>
-              </div>
-            </div>
-            <div className="flex items-center space-x-2">
+    <>
+      <PageHeader
+        title="Configuration items"
+        description="Autotask & RMM device management"
+        breadcrumbs={[{ label: 'Configuration items' }]}
+        actions={
+          <>
             {selectedCompany && filteredComparison.length > 0 && (
               <Button
                 variant="outline"
                 size="icon"
                 onClick={() => setAdminExpanded(!adminExpanded)}
                 className={`border-orange-500 ${adminExpanded ? 'bg-orange-50 dark:bg-orange-950/20' : ''}`}
+                aria-label="Bulk admin actions"
               >
                 <Shield className="h-4 w-4 text-orange-600" />
               </Button>
             )}
             <Button
-                variant="ghost" 
-                size="icon" 
+              variant="outline"
+              size="sm"
               onClick={() => selectedCompany && setForceRefresh(prev => prev + 1)}
               disabled={!selectedCompany || loading}
             >
-                <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+              <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+              Refresh
             </Button>
-              <ThemeToggle />
             <Button
               size="sm"
-                className="bg-gradient-to-r from-purple-600 to-purple-700 text-white hover:from-purple-700 hover:to-purple-800"
               onClick={() => setExportModalOpen(true)}
               disabled={!selectedCompany || displayComparison.length === 0}
             >
               <Download className="w-4 h-4 mr-2" />
               Export
             </Button>
-            </div>
-          </div>
-        </div>
-      </header>
+          </>
+        }
+      />
 
-      {/* Main Content */}
-      <main className="container mx-auto px-4 py-8">
+      <main className="container mx-auto px-6 py-6">
         {/* Compact Company Selector & Filters */}
         <Card className="mb-6 border-0 shadow-lg">
           <CardContent className="pt-6">
@@ -1320,7 +1299,7 @@ function ConfigurationItemsContent() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-    </div>
+    </>
   );
 }