refactor(ui): replace page titles in admin with PageHeader component

Standardized layout across admin views by replacing static <h1> tags and
custom headers with the reusable PageHeader component. Updated icons and
descriptions to improve clarity and visual hierarchy. Also updated the
Namespaces sidebar icon to match its new visual identity.

Author: luannmoreira

ui/admin/src/components/Settings/SettingsAuthentication.vue

@@ -4,11 +4,14 @@
     data-test="configure-sso-dialog"
   />
 
-  <div class="pb-2">
-    <h1 data-test="auth-header">
-      Authentication
-    </h1>
-  </div>
+  <PageHeader
+    icon="mdi-shield-account"
+    title="Authentication"
+    overline="Admin Settings"
+    description="Control how administrators authenticate to the ShellHub console, including SAML SSO."
+    icon-color="primary"
+    title-test-id="auth-header"
+  />
   <v-card
     class="w-100 pa-4 bg-background border"
     data-test="auth-card"
@@ -163,6 +166,7 @@ import useInstanceStore from "@admin/store/modules/instance";
 import useSnackbar from "@/helpers/snackbar";
 import ConfigureSSO from "../Instance/SSO/ConfigureSSO.vue";
 import CopyWarning from "@/components/User/CopyWarning.vue";
+import PageHeader from "@/components/PageHeader.vue";
 
 const showSSODialog = ref(false);
 const snackbar = useSnackbar();

ui/admin/src/components/Settings/SettingsLicense.vue

@@ -1,14 +1,19 @@
 <template>
   <v-alert
     v-if="licenseAlert"
-    class="mt-4 pl-4 pr-4 d-flex justify-center align-center"
+    class="my-4 pl-4 pr-4 d-flex justify-center align-center"
     variant="outlined"
     :type="licenseAlert.type"
     :text="licenseAlert.message"
   />
-  <h1 class="pb-2">
-    License Details
-  </h1>
+  <PageHeader
+    icon="mdi-license"
+    title="License Details"
+    overline="Admin Settings"
+    description="Review the current license scope and upload a new file when your subscription changes."
+    icon-color="primary"
+    title-test-id="license-header"
+  />
   <v-card
     class="w-100 pa-4 bg-background border"
     data-test="license-card"
@@ -153,6 +158,7 @@ import { AdminLicenseFeatures } from "@admin/interfaces/ILicense";
 import CopyWarning from "@/components/User/CopyWarning.vue";
 import useSnackbar from "@/helpers/snackbar";
 import handleError from "@/utils/handleError";
+import PageHeader from "@/components/PageHeader.vue";
 
 const licenseStore = useLicenseStore();
 const snackbar = useSnackbar();

ui/admin/src/layouts/AppLayout.vue

@@ -288,7 +288,7 @@ const items = reactive([
     path: "/firewall-rules",
   },
   {
-    icon: "mdi-login",
+    icon: "mdi-cloud-braces",
     title: "Namespaces",
     path: "/namespaces",
   },

ui/admin/src/views/Announcements.vue

@@ -1,23 +1,29 @@
 <template>
-  <div class="d-flex flex-column justify-space-between align-center flex-md-row mb-2">
-    <h1 data-test="announcement-title">
-      Announcements
-    </h1>
-    <v-spacer />
-    <v-btn
-      :tabindex="0"
-      data-test="new-announcement-btn"
-      color="primary"
-      append-icon="mdi-plus"
-      text="New"
-      @click="goToNewAnnouncement"
-    />
-  </div>
+  <PageHeader
+    icon="mdi-bullhorn"
+    title="Announcements"
+    overline="Platform Messaging"
+    description="Share important system broadcasts with every namespace administrator."
+    icon-color="primary"
+    data-test="announcement-title"
+  >
+    <template #actions>
+      <v-btn
+        :tabindex="0"
+        data-test="new-announcement-btn"
+        color="primary"
+        append-icon="mdi-plus"
+        text="New"
+        @click="goToNewAnnouncement"
+      />
+    </template>
+  </PageHeader>
   <AnnouncementList />
 </template>
 
 <script setup lang="ts">
 import { useRouter } from "vue-router";
+import PageHeader from "@/components/PageHeader.vue";
 import AnnouncementList from "../components/Announcement/AnnouncementList.vue";
 
 const router = useRouter();

ui/admin/src/views/Dashboard.vue

@@ -1,33 +1,12 @@
 <template>
   <div v-if="!hasStatus">
-    <v-card
-      class="bg-transparent mb-12"
-      elevation="0"
-    >
-      <div class="d-flex align-start">
-        <v-avatar
-          color="primary"
-          size="48"
-          class="mr-4"
-        >
-          <v-icon
-            size="32"
-            icon="mdi-view-dashboard"
-          />
-        </v-avatar>
-        <div>
-          <h1 class="text-overline text-medium-emphasis mb-1">
-            Admin Dashboard
-          </h1>
-          <h2 class="text-h5 font-weight-bold mb-2">
-            System Overview
-          </h2>
-          <p class="text-body-2 text-medium-emphasis">
-            Monitor and manage your ShellHub instance metrics and statistics
-          </p>
-        </div>
-      </div>
-    </v-card>
+    <PageHeader
+      icon="mdi-home"
+      title="System Overview"
+      overline="Admin Dashboard"
+      description="Monitor and manage your ShellHub instance metrics and statistics."
+      icon-color="primary"
+    />
 
     <v-row class="d-flex align-center mb-2 pa-3">
       <v-icon
@@ -111,7 +90,7 @@
         <StatCard
           title="Active Sessions"
           :stat="stats.active_sessions ?? 0"
-          icon="mdi-console-network"
+          icon="mdi-history"
           button-label="View all Sessions"
           path="sessions"
         />
@@ -137,6 +116,7 @@ import useStatsStore from "@admin/store/modules/stats";
 import { IAdminStats } from "@admin/interfaces/IStats";
 import useSnackbar from "@/helpers/snackbar";
 import StatCard from "@/components/StatCard.vue";
+import PageHeader from "@/components/PageHeader.vue";
 
 const snackbar = useSnackbar();
 const statsStore = useStatsStore();

ui/admin/src/views/Device.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="d-flex flex-column justify-space-between align-center flex-sm-row mb-2">
-    <h1>Devices</h1>
-    <v-spacer />
+  <PageHeader
+    icon="mdi-developer-board"
+    title="Devices"
+    overline="Fleet Oversight"
+    description="Audit every registered device across all namespaces and quickly find specific hosts."
+    icon-color="primary"
+  >
     <v-text-field
       v-model.trim="filter"
-      class="w-50"
+      class="w-100 w-md-50"
       label="Search by hostname"
       color="primary"
       single-line
@@ -13,13 +17,13 @@
       density="compact"
       @keyup="searchDevices"
     />
-    <v-spacer />
-  </div>
+  </PageHeader>
   <DeviceList />
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import PageHeader from "@/components/PageHeader.vue";
 import useDevicesStore from "@admin/store/modules/devices";
 import useSnackbar from "@/helpers/snackbar";
 import DeviceList from "../components/Device/DeviceList.vue";

ui/admin/src/views/FirewallRules.vue

@@ -1,10 +1,16 @@
 <template>
-  <h1 class="mb-2">
-    Firewall Rules
-  </h1>
-  <FirewallRulesList />
+  <PageHeader
+    icon="mdi-security"
+    title="Firewall Rules"
+    overline="Security Controls"
+    description="Review every policy applied across namespaces and confirm access is locked down."
+    icon-color="primary"
+    data-test="firewall-rules"
+  />
+  <FirewallRulesList data-test="firewall-rules-list" />
 </template>
 
 <script setup lang="ts">
+import PageHeader from "@/components/PageHeader.vue";
 import FirewallRulesList from "../components/FirewallRules/FirewallRulesList.vue";
 </script>

ui/admin/src/views/Namespaces.vue

@@ -1,26 +1,33 @@
 <template>
-  <div class="d-flex flex-column justify-space-between align-center flex-md-row mb-2">
-    <h1>Namespaces</h1>
-    <v-spacer />
+  <PageHeader
+    icon="mdi-cloud-braces"
+    title="Namespaces"
+    overline="Namespace Management"
+    description="Track every tenant, search by name, and export namespace data for audits."
+    icon-color="primary"
+  >
+    <template #actions>
+      <NamespaceExport />
+    </template>
+
     <v-text-field
       v-model.trim="filter"
       label="Search by name"
       color="primary"
-      class="w-50"
+      class="w-100 w-md-50"
       single-line
       hide-details
       append-inner-icon="mdi-magnify"
       density="compact"
       @keyup="searchNamespaces"
     />
-    <v-spacer />
-    <NamespaceExport />
-  </div>
+  </PageHeader>
   <NamespaceList />
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import PageHeader from "@/components/PageHeader.vue";
 import useNamespacesStore from "@admin/store/modules/namespaces";
 import NamespaceList from "../components/Namespace/NamespaceList.vue";
 import NamespaceExport from "../components/Namespace/NamespaceExport.vue";

ui/admin/src/views/NewAnnouncement.vue

@@ -1,5 +1,12 @@
 <template>
-  <h1>Create new Announcement</h1>
+  <PageHeader
+    icon="mdi-bullhorn"
+    title="Create new Announcement"
+    overline="Platform Messaging"
+    description="Compose a system-wide update to keep every namespace informed about critical changes."
+    icon-color="primary"
+    data-test="announcement-title"
+  />
 
   <v-card class="pa-4 mt-2 bg-background border">
     <v-card-item>
@@ -74,6 +81,7 @@ import useAnnouncementStore from "@admin/store/modules/announcement";
 import useSnackbar from "@/helpers/snackbar";
 import { envVariables } from "@/envVariables";
 import handleError from "@/utils/handleError";
+import PageHeader from "@/components/PageHeader.vue";
 
 const router = useRouter();
 const snackbar = useSnackbar();

ui/admin/src/views/Sessions.vue

@@ -1,10 +1,15 @@
 <template>
-  <h1 class="mb-2">
-    Sessions
-  </h1>
+  <PageHeader
+    icon="mdi-history"
+    title="Sessions"
+    overline="Activity Monitoring"
+    description="Track live and historical sessions happening across every namespace."
+    icon-color="primary"
+  />
   <SessionList />
 </template>
 
 <script setup lang="ts">
+import PageHeader from "@/components/PageHeader.vue";
 import SessionList from "../components/Sessions/SessionList.vue";
 </script>