Add system settings, audit logging, user management, and dark mode fixes

System Settings:
- Add SystemSettings.vue with Zabbix integration, SMTP/email config, SAML SSO settings
- Add Setting model with key-value storage and typed values
- Add settings API with caching

Audit Logging:
- Add AuditLog model tracking user, IP, action, entity changes
- Add comprehensive audit logging to all CRUD operations:
  - Machines, Computers, Equipment, Network devices, VLANs, Subnets
  - Printers, USB devices (including checkout/checkin)
  - Applications, Settings, Users/Roles
- Track old/new values for all field changes
- Mask sensitive values (passwords, tokens) in logs

User Management:
- Add UsersList.vue with full user CRUD
- Add Role management with granular permissions
- Add 41 predefined permissions across 10 categories
- Add users API with roles and permissions endpoints

Reports:
- Add TonerReport.vue for printer supply monitoring

Dark Mode Fixes:
- Fix map position section in PCForm, PrinterForm
- Fix alert-warning in KnowledgeBaseDetail
- All components now use CSS variables for theming

CLI Commands:
- Add flask seed permissions
- Add flask seed settings

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/views/reports/ReportsIndex.vue

@@ -4,6 +4,11 @@
   </div>
 
   <div class="reports-grid">
+    <div class="report-card card" @click="router.push('/reports/toner')">
+      <h3>Toner Report</h3>
+      <p>View printers with low or critical toner/supply levels</p>
+      <span class="badge">Printers</span>
+    </div>
     <div v-for="report in reports" :key="report.id" class="report-card card" @click="runReport(report)">
       <h3>{{ report.name }}</h3>
       <p>{{ report.description }}</p>

frontend/src/views/reports/TonerReport.vue

@@ -0,0 +1,251 @@
+<template>
+  <div>
+    <div class="page-header">
+      <h1>Toner Report</h1>
+      <div class="header-actions">
+        <router-link to="/reports" class="btn btn-secondary">Back to Reports</router-link>
+      </div>
+    </div>
+
+    <div v-if="loading" class="loading">Loading supply data...</div>
+
+    <div v-else-if="error" class="card">
+      <p class="text-danger">{{ error }}</p>
+    </div>
+
+    <template v-else>
+      <!-- Summary Bar -->
+      <div class="summary-bar">
+        <div class="summary-stat card">
+          <div class="stat-value">{{ summary.total_checked }}</div>
+          <div class="stat-label">Printers Checked</div>
+        </div>
+        <div class="summary-stat card stat-low">
+          <div class="stat-value">{{ summary.low }}</div>
+          <div class="stat-label">Low Supply</div>
+        </div>
+        <div class="summary-stat card stat-critical">
+          <div class="stat-value">{{ summary.critical }}</div>
+          <div class="stat-label">Critical Supply</div>
+        </div>
+      </div>
+
+      <!-- Filter Buttons -->
+      <div class="filters">
+        <button
+          v-for="f in filterOptions"
+          :key="f.value"
+          class="btn"
+          :class="filter === f.value ? 'btn-primary' : 'btn-secondary'"
+          @click="filter = f.value"
+        >
+          {{ f.label }}
+        </button>
+      </div>
+
+      <!-- Printers Table -->
+      <div class="card">
+        <div class="table-container">
+          <table v-if="filteredPrinters.length">
+            <thead>
+              <tr>
+                <th>Printer Name</th>
+                <th>Asset #</th>
+                <th>Location</th>
+                <th>IP Address</th>
+                <th>Supplies</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="printer in filteredPrinters" :key="printer.printerid">
+                <td>
+                  <router-link :to="`/printers/${printer.printerid}`">
+                    {{ printer.printername || 'Unknown' }}
+                  </router-link>
+                </td>
+                <td>{{ printer.assetnumber }}</td>
+                <td>{{ printer.location || '-' }}</td>
+                <td>{{ printer.ipaddress }}</td>
+                <td class="supplies-cell">
+                  <div
+                    v-for="(supply, idx) in printer.supplies"
+                    :key="idx"
+                    class="supply-row"
+                  >
+                    <span class="supply-name">{{ supply.name }}</span>
+                    <div class="supply-bar-track">
+                      <div
+                        class="supply-bar-fill"
+                        :class="'supply-' + supply.status"
+                        :style="{ width: Math.max(supply.level, 2) + '%' }"
+                      ></div>
+                    </div>
+                    <span class="supply-level" :class="'supply-text-' + supply.status">
+                      {{ supply.level }}%
+                    </span>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <p v-else class="empty-state">No printers match the selected filter.</p>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { printersApi } from '@/api'
+
+const loading = ref(true)
+const error = ref(null)
+const printers = ref([])
+const summary = ref({ total_checked: 0, low: 0, critical: 0 })
+const filter = ref('all')
+
+const filterOptions = [
+  { label: 'All', value: 'all' },
+  { label: 'Critical', value: 'critical' },
+  { label: 'Low', value: 'low' }
+]
+
+const filteredPrinters = computed(() => {
+  if (filter.value === 'all') return printers.value
+  return printers.value.filter(p =>
+    p.supplies.some(s => s.status === filter.value)
+  )
+})
+
+onMounted(async () => {
+  try {
+    const response = await printersApi.lowSupplies()
+    const data = response.data.data
+    printers.value = data.printers || []
+    summary.value = data.summary || { total_checked: 0, low: 0, critical: 0 }
+  } catch (err) {
+    console.error('Error loading toner report:', err)
+    error.value = 'Failed to load supply data. Zabbix may not be configured or reachable.'
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.summary-bar {
+  display: flex;
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.summary-stat {
+  flex: 1;
+  text-align: center;
+  padding: 1.25rem;
+}
+
+.stat-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.stat-label {
+  color: var(--text-light);
+  margin-top: 0.25rem;
+}
+
+.stat-low .stat-value {
+  color: var(--warning);
+}
+
+.stat-critical .stat-value {
+  color: var(--danger);
+}
+
+.supplies-cell {
+  min-width: 280px;
+}
+
+.supply-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.35rem;
+}
+
+.supply-row:last-child {
+  margin-bottom: 0;
+}
+
+.supply-name {
+  flex: 0 0 120px;
+  font-size: 0.85rem;
+  color: var(--text-light);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.supply-bar-track {
+  flex: 1;
+  height: 8px;
+  background: var(--border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.supply-bar-fill {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.3s ease;
+}
+
+.supply-ok {
+  background: var(--success);
+}
+
+.supply-low {
+  background: var(--warning);
+}
+
+.supply-critical {
+  background: var(--danger);
+}
+
+.supply-level {
+  flex: 0 0 40px;
+  text-align: right;
+  font-size: 0.85rem;
+  font-weight: 600;
+}
+
+.supply-text-ok {
+  color: var(--success);
+}
+
+.supply-text-low {
+  color: var(--warning);
+}
+
+.supply-text-critical {
+  color: var(--danger);
+}
+
+.empty-state {
+  text-align: center;
+  padding: 2rem;
+  color: var(--text-light);
+}
+
+.text-danger {
+  color: var(--danger);
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+</style>