shopdb-flask/frontend/src/views/settings/SettingsIndex.vue

<template>
  <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>
  </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'
</script>

<style scoped>
.settings-page h1 {
  margin-bottom: 1.5rem;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.settings-card {
  display: block;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.settings-card:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.card-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.settings-card h3 {
  margin: 0 0 0.5rem 0;
  color: var(--text);
}

.settings-card p {
  margin: 0;
  color: var(--text-light);
  font-size: 0.9rem;
}
</style>