From 344276751eb4167b1974b9bbbf585ccbaaafd92f Mon Sep 17 00:00:00 2001
From: lorentz <lorentz@wulfconsulting.com>
Date: Sun, 3 May 2026 11:03:49 -0400
Subject: [PATCH] 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 | 99 +++++++++++++-------------------
 1 file changed, 39 insertions(+), 60 deletions(-)

diff --git a/app/configuration-items/page.tsx b/app/configuration-items/page.tsx
index e870d34..d673940 100644
--- a/app/configuration-items/page.tsx
+++ b/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">
-              {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' : ''}`}
-                >
-                  <Shield className="h-4 w-4 text-orange-600" />
-                </Button>
-              )}
-              <Button 
-                variant="ghost" 
-                size="icon" 
-                onClick={() => selectedCompany && setForceRefresh(prev => prev + 1)}
-                disabled={!selectedCompany || loading}
+    <>
+      <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"
               >
-                <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+                <Shield className="h-4 w-4 text-orange-600" />
               </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>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => selectedCompany && setForceRefresh(prev => prev + 1)}
+              disabled={!selectedCompany || loading}
+            >
+              <RefreshCw className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
+              Refresh
+            </Button>
+            <Button
+              size="sm"
+              onClick={() => setExportModalOpen(true)}
+              disabled={!selectedCompany || displayComparison.length === 0}
+            >
+              <Download className="w-4 h-4 mr-2" />
+              Export
+            </Button>
+          </>
+        }
+      />
 
-      {/* 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>
+    </>
   );
 }