From 398353ff79e99a35ac42d71823ca286cefb8bd92 Mon Sep 17 00:00:00 2001
From: cproudlock <cproudlock@localhost>
Date: Fri, 26 Jun 2026 22:12:10 -0400
Subject: [PATCH] Group the settings index into labeled sections

The settings index had grown to 16 flat cards with no organization. Group them
into purpose-based sections (Asset Reference Data, Locations & Organization,
Network, Displays & Kiosks, System, Access & Audit) so it stays scannable as it
grows. Cards are now data-driven (one group list) instead of repeated markup;
all existing routes/cards preserved.

Frontend-only. Build + naming green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/views/settings/SettingsIndex.vue | 176 ++++++++----------
 1 file changed, 79 insertions(+), 97 deletions(-)

diff --git a/frontend/src/views/settings/SettingsIndex.vue b/frontend/src/views/settings/SettingsIndex.vue
index 729ddc4..b48acb2 100644
--- a/frontend/src/views/settings/SettingsIndex.vue
+++ b/frontend/src/views/settings/SettingsIndex.vue
@@ -2,108 +2,76 @@
   <div class="settings-page">
     <h1>Settings</h1>
 
-    <div class="settings-grid">
-      <router-link to="/settings/vendors" class="settings-card">
-        <div class="card-icon"><Factory :size="28" /></div>
-        <h3>Vendors</h3>
-        <p>Manage equipment vendors and manufacturers</p>
-      </router-link>
-
-      <router-link to="/settings/locations" class="settings-card">
-        <div class="card-icon"><MapPin :size="28" /></div>
-        <h3>Locations</h3>
-        <p>Manage physical locations and sites</p>
-      </router-link>
-
-      <router-link to="/settings/statuses" class="settings-card">
-        <div class="card-icon"><Tag :size="28" /></div>
-        <h3>Statuses</h3>
-        <p>Manage equipment status types</p>
-      </router-link>
-
-      <router-link to="/settings/models" class="settings-card">
-        <div class="card-icon"><Package :size="28" /></div>
-        <h3>Models</h3>
-        <p>Manage equipment models by vendor</p>
-      </router-link>
-
-      <router-link to="/settings/modelsupplies" class="settings-card">
-        <div class="card-icon"><Droplets :size="28" /></div>
-        <h3>Model Toners and Supplies</h3>
-        <p>Map toner, drum, and waste part numbers to printer models</p>
-      </router-link>
-
-      <router-link to="/settings/machinetypes" class="settings-card">
-        <div class="card-icon"><Monitor :size="28" /></div>
-        <h3>Machine Types</h3>
-        <p>Manage machine type categories</p>
-      </router-link>
-
-      <router-link to="/settings/pctypes" class="settings-card">
-        <div class="card-icon"><Laptop :size="28" /></div>
-        <h3>PC Types</h3>
-        <p>Manage PC form factors</p>
-      </router-link>
-
-      <router-link to="/settings/operatingsystems" class="settings-card">
-        <div class="card-icon"><Cog :size="28" /></div>
-        <h3>Operating Systems</h3>
-        <p>Manage OS versions and EOL dates</p>
-      </router-link>
-
-      <router-link to="/settings/businessunits" class="settings-card">
-        <div class="card-icon"><Building :size="28" /></div>
-        <h3>Business Units</h3>
-        <p>Manage organizational units</p>
-      </router-link>
-
-      <router-link to="/settings/dashboarddefaults" class="settings-card">
-        <div class="card-icon"><MonitorSmartphone :size="28" /></div>
-        <h3>Dashboard Defaults</h3>
-        <p>Map kiosk IPs to a default business unit</p>
-      </router-link>
-
-      <router-link to="/settings/vlans" class="settings-card">
-        <div class="card-icon"><Globe :size="28" /></div>
-        <h3>VLANs</h3>
-        <p>Manage virtual LANs</p>
-      </router-link>
-
-      <router-link to="/settings/subnets" class="settings-card">
-        <div class="card-icon"><Link :size="28" /></div>
-        <h3>Subnets</h3>
-        <p>Manage IP subnets and DHCP</p>
-      </router-link>
-
-      <router-link to="/settings/system" class="settings-card">
-        <div class="card-icon"><Settings :size="28" /></div>
-        <h3>System Settings</h3>
-        <p>Configure integrations and system options</p>
-      </router-link>
-
-      <router-link to="/settings/plugins" class="settings-card">
-        <div class="card-icon"><Puzzle :size="28" /></div>
-        <h3>Plugins</h3>
-        <p>Enable or disable installed plugins</p>
-      </router-link>
-
-      <router-link to="/settings/auditlogs" class="settings-card">
-        <div class="card-icon"><FileText :size="28" /></div>
-        <h3>Audit Logs</h3>
-        <p>View system activity and change history</p>
-      </router-link>
-
-      <router-link to="/settings/users" class="settings-card">
-        <div class="card-icon"><Users :size="28" /></div>
-        <h3>Users & Roles</h3>
-        <p>Manage user accounts and permissions</p>
-      </router-link>
-    </div>
+    <section v-for="group in groups" :key="group.title" class="settings-group">
+      <h2 class="group-title">{{ group.title }}</h2>
+      <div class="settings-grid">
+        <router-link
+          v-for="card in group.cards"
+          :key="card.to"
+          :to="card.to"
+          class="settings-card"
+        >
+          <div class="card-icon"><component :is="card.icon" :size="28" /></div>
+          <h3>{{ card.title }}</h3>
+          <p>{{ card.description }}</p>
+        </router-link>
+      </div>
+    </section>
   </div>
 </template>
 
 <script setup>
 import { Factory, MapPin, Tag, Package, Droplets, Monitor, MonitorSmartphone, Laptop, Cog, Building, Globe, Link, Settings, FileText, Users, Puzzle } from 'lucide-vue-next'
+
+// Settings grouped by purpose so the index stays scannable as it grows.
+const groups = [
+  {
+    title: 'Asset Reference Data',
+    cards: [
+      { to: '/settings/vendors', icon: Factory, title: 'Vendors', description: 'Manage equipment vendors and manufacturers' },
+      { to: '/settings/models', icon: Package, title: 'Models', description: 'Manage equipment models by vendor' },
+      { to: '/settings/modelsupplies', icon: Droplets, title: 'Model Toners and Supplies', description: 'Map toner, drum, and waste part numbers to printer models' },
+      { to: '/settings/machinetypes', icon: Monitor, title: 'Machine Types', description: 'Manage machine type categories' },
+      { to: '/settings/pctypes', icon: Laptop, title: 'PC Types', description: 'Manage PC form factors' },
+      { to: '/settings/operatingsystems', icon: Cog, title: 'Operating Systems', description: 'Manage OS versions and EOL dates' },
+      { to: '/settings/statuses', icon: Tag, title: 'Statuses', description: 'Manage asset status types' },
+    ],
+  },
+  {
+    title: 'Locations & Organization',
+    cards: [
+      { to: '/settings/locations', icon: MapPin, title: 'Locations', description: 'Manage physical locations and sites' },
+      { to: '/settings/businessunits', icon: Building, title: 'Business Units', description: 'Manage organizational units' },
+    ],
+  },
+  {
+    title: 'Network',
+    cards: [
+      { to: '/settings/vlans', icon: Globe, title: 'VLANs', description: 'Manage virtual LANs' },
+      { to: '/settings/subnets', icon: Link, title: 'Subnets', description: 'Manage IP subnets and DHCP' },
+    ],
+  },
+  {
+    title: 'Displays & Kiosks',
+    cards: [
+      { to: '/settings/dashboarddefaults', icon: MonitorSmartphone, title: 'Dashboard Defaults', description: 'Map kiosk IPs to a default business unit' },
+    ],
+  },
+  {
+    title: 'System',
+    cards: [
+      { to: '/settings/system', icon: Settings, title: 'System Settings', description: 'Integrations, identifiers, search, and PC-type mapping' },
+      { to: '/settings/plugins', icon: Puzzle, title: 'Plugins', description: 'Enable or disable installed plugins' },
+    ],
+  },
+  {
+    title: 'Access & Audit',
+    cards: [
+      { to: '/settings/users', icon: Users, title: 'Users & Roles', description: 'Manage user accounts and permissions' },
+      { to: '/settings/auditlogs', icon: FileText, title: 'Audit Logs', description: 'View system activity and change history' },
+    ],
+  },
+]
 </script>
 
 <style scoped>
@@ -111,6 +79,20 @@ import { Factory, MapPin, Tag, Package, Droplets, Monitor, MonitorSmartphone, La
   margin-bottom: 1.5rem;
 }
 
+.settings-group {
+  margin-bottom: 2rem;
+}
+
+.group-title {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-light);
+  margin: 0 0 0.75rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
 .settings-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));