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>
This commit is contained in:
cproudlock
@@ -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));
|
||||
|
||||
Reference in New Issue
Block a user