Add dashboard defaults (visitor-IP -> business-unit) for kiosk displays

Classic feature gap: a shopfloor/lobby kiosk auto-selects which business unit to
show based on the display PC's IP (classic dashboarddefaults table +
apivisitorlocation.asp). For the main admin dashboard this does nothing - it is
kiosk/visitor-display infra.

- Model: DashboardDefault (dashboarddefaults: ipaddress unique, businessunitid
  FK, description). Migration 7d01_dashboarddefaults (head).
- API (core, /api/dashboarddefaults): CRUD + GET /visitor-location that resolves
  the calling display's business unit from its IP (X-Forwarded-For/remote_addr,
  or explicit ?ipaddress=); unmapped IP returns a null businessunitid, not an
  error. Unauthenticated resolve (kiosks); writes are admin.
- Frontend: ShopfloorDashboard auto-selects its business unit via visitor-location
  on load when none is chosen; Settings > Dashboard Defaults CRUD page +
  dashboardDefaultsApi client.

Tests: create + resolve by IP -> BU; unmapped IP -> null; duplicate IP 409.
191 tests pass, naming green, app boots, endpoint + admin page verified live.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
cproudlock
2026-06-26 22:09:38 -04:00
parent 85f98e87cb
commit a4b98e10db
12 changed files with 475 additions and 2 deletions

View File

@@ -673,6 +673,26 @@ export const employeesApi = {
// Alias for different casing
export const businessUnitsApi = businessunitsApi
// Dashboard defaults: visitor-IP -> business-unit mapping for kiosks
export const dashboardDefaultsApi = {
list() {
return api.get('/dashboarddefaults')
},
create(data) {
return api.post('/dashboarddefaults', data)
},
update(id, data) {
return api.put(`/dashboarddefaults/${id}`, data)
},
delete(id) {
return api.delete(`/dashboarddefaults/${id}`)
},
// Resolve the calling display's business unit by its IP
visitorLocation() {
return api.get('/dashboarddefaults/visitor-location')
}
}
// System Settings API
export const pluginsApi = {
list() {

View File

@@ -86,6 +86,12 @@ export default [
component: () => import('../../views/settings/BusinessUnitsList.vue'),
meta: { requiresAuth: true, requiresAdmin: true }
},
{
path: 'settings/dashboarddefaults',
name: 'dashboarddefaults',
component: () => import('../../views/settings/DashboardDefaultsList.vue'),
meta: { requiresAuth: true, requiresAdmin: true }
},
{
path: 'settings/system',
name: 'system-settings',

View File

@@ -129,7 +129,7 @@
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { notificationsApi, businessUnitsApi } from '@/api'
import { notificationsApi, businessUnitsApi, dashboardDefaultsApi } from '@/api'
const loading = ref(true)
const businessUnit = ref('')
@@ -176,6 +176,19 @@ onMounted(async () => {
console.error('Error loading business units:', err)
}
// Auto-select this kiosk's business unit from its IP (visitor location),
// unless one was already chosen. Falls back to "all" when the IP is unmapped.
if (!businessUnit.value) {
try {
const response = await dashboardDefaultsApi.visitorLocation()
if (response.data.data?.businessunitid) {
businessUnit.value = response.data.data.businessunitid
}
} catch (err) {
console.error('Error resolving visitor location:', err)
}
}
await loadData()
// Auto-refresh every 30 seconds

View File

@@ -0,0 +1,187 @@
<template>
<div>
<div class="page-header">
<h2>Dashboard Defaults</h2>
<button class="btn btn-primary" @click="openModal()">+ Add Mapping</button>
</div>
<p class="setting-description">
Map a kiosk/lobby display's IP address to the business unit it should show.
The shopfloor dashboard auto-selects this business unit by the display's IP
when none is chosen.
</p>
<div class="card">
<div v-if="loading" class="loading">Loading...</div>
<template v-else>
<div class="table-container">
<table>
<thead>
<tr>
<th>IP Address</th>
<th>Business Unit</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="d in items" :key="d.dashboarddefaultid">
<td class="mono">{{ d.ipaddress }}</td>
<td>{{ d.businessunit || '-' }}</td>
<td class="cell-truncate" :title="d.description">{{ d.description || '-' }}</td>
<td class="actions">
<button class="btn btn-secondary btn-sm" @click="openModal(d)">Edit</button>
<button class="btn btn-danger btn-sm" @click="confirmDelete(d)">Delete</button>
</td>
</tr>
<tr v-if="items.length === 0">
<td colspan="4" style="text-align: center; color: var(--text-light);">
No mappings yet
</td>
</tr>
</tbody>
</table>
</div>
</template>
</div>
<!-- Add/Edit Modal -->
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
<div class="modal">
<div class="modal-header">
<h3>{{ editing ? 'Edit Mapping' : 'Add Mapping' }}</h3>
</div>
<form @submit.prevent="save">
<div class="modal-body">
<div class="form-group">
<label for="ipaddress">IP Address *</label>
<input id="ipaddress" v-model="form.ipaddress" type="text" class="form-control"
placeholder="e.g., 10.20.30.40" required />
</div>
<div class="form-group">
<label for="businessunitid">Business Unit *</label>
<select id="businessunitid" v-model="form.businessunitid" class="form-control" required>
<option value="">Select business unit...</option>
<option v-for="bu in businessUnits" :key="bu.businessunitid" :value="bu.businessunitid">
{{ bu.businessunit }}
</option>
</select>
</div>
<div class="form-group">
<label for="description">Description</label>
<input id="description" v-model="form.description" type="text" class="form-control"
placeholder="e.g., Materials lobby kiosk" />
</div>
<div v-if="error" class="error-message">{{ error }}</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" @click="closeModal">Cancel</button>
<button type="submit" class="btn btn-primary" :disabled="saving">
{{ saving ? 'Saving...' : 'Save' }}
</button>
</div>
</form>
</div>
</div>
<!-- Delete Modal -->
<div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
<div class="modal">
<div class="modal-header"><h3>Delete Mapping</h3></div>
<div class="modal-body">
<p>Delete the mapping for <strong>{{ toDelete?.ipaddress }}</strong>?</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" @click="showDeleteModal = false">Cancel</button>
<button class="btn btn-danger" @click="deleteItem">Delete</button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { dashboardDefaultsApi, businessUnitsApi } from '../../api'
const items = ref([])
const businessUnits = ref([])
const loading = ref(true)
const showModal = ref(false)
const editing = ref(null)
const saving = ref(false)
const error = ref('')
const showDeleteModal = ref(false)
const toDelete = ref(null)
const form = ref({ ipaddress: '', businessunitid: '', description: '' })
onMounted(async () => {
try {
const response = await businessUnitsApi.list({ perpage: 100 })
businessUnits.value = response.data.data || []
} catch (err) {
console.error('Error loading business units:', err)
}
await loadData()
})
async function loadData() {
loading.value = true
try {
const response = await dashboardDefaultsApi.list()
items.value = response.data.data || []
} catch (err) {
console.error('Error loading dashboard defaults:', err)
} finally {
loading.value = false
}
}
function openModal(item = null) {
editing.value = item
form.value = item ? {
ipaddress: item.ipaddress || '',
businessunitid: item.businessunitid || '',
description: item.description || ''
} : { ipaddress: '', businessunitid: '', description: '' }
error.value = ''
showModal.value = true
}
function closeModal() { showModal.value = false; editing.value = null }
async function save() {
error.value = ''
saving.value = true
try {
if (editing.value) {
await dashboardDefaultsApi.update(editing.value.dashboarddefaultid, form.value)
} else {
await dashboardDefaultsApi.create(form.value)
}
closeModal()
loadData()
} catch (err) {
error.value = err.response?.data?.message || 'Failed to save'
} finally {
saving.value = false
}
}
function confirmDelete(item) { toDelete.value = item; showDeleteModal.value = true }
async function deleteItem() {
try {
await dashboardDefaultsApi.delete(toDelete.value.dashboarddefaultid)
showDeleteModal.value = false
toDelete.value = null
loadData()
} catch (err) {
alert('Failed to delete')
}
}
</script>

View File

@@ -57,6 +57,12 @@
<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>
@@ -97,7 +103,7 @@
</template>
<script setup>
import { Factory, MapPin, Tag, Package, Droplets, Monitor, Laptop, Cog, Building, Globe, Link, Settings, FileText, Users, Puzzle } from 'lucide-vue-next'
import { Factory, MapPin, Tag, Package, Droplets, Monitor, MonitorSmartphone, Laptop, Cog, Building, Globe, Link, Settings, FileText, Users, Puzzle } from 'lucide-vue-next'
</script>
<style scoped>