ebca0b00b0
Relocate warranty, measuringtools, network, printers, usb, notifications, computers, and slides into plugins/<name>/frontend/. Each plugin's views are pulled from wherever they lived (own dir, plus the shared views/settings/, views/reports/, views/print/ dirs, and top-level views) into the plugin's frontend/views/, and its route file becomes the self-contained routes.js. Handled the messy cases: - computers: name mismatch (its views live in views/pcs/) - moved by following the route file's own imports, so the dir name did not matter. Its OS/access- protocol/PC-type settings views move with it (only computers.js routed them). - network: NetworkHub's sibling sub-views (NetworkDevicesList, SubnetsBrowse, not directly routed) moved too so its `./` imports resolve. - printers: the qrLogo helper is SHARED with core AssetLabel, so it stays in views/print/ and PrinterQR imports it via @/views/print/qrLogo. - slides: route file is toplevel-only (TVDashboard); SlideManager stays core (core.js routes /settings/slides). frontend/src/views/ now holds only core views; frontend/src/router/routes/ holds only core.js. All 13 plugins are self-contained under plugins/<name>/frontend/. Verified live: Network (hub + moved sub-views), Computers (name mismatch), GE-Enforce (helper), printedparts all render from their staged frontends. Build + 58 vitest + naming green.
102 lines
3.6 KiB
Vue
102 lines
3.6 KiB
Vue
<template>
|
|
<div>
|
|
<div class="page-header">
|
|
<h1>Calibration Due</h1>
|
|
<router-link to="/reports" class="btn btn-secondary">Back to Reports</router-link>
|
|
</div>
|
|
|
|
<div v-if="loading" class="loading">Loading...</div>
|
|
<template v-else>
|
|
<div class="summary-row">
|
|
<div v-for="b in bucketOrder" :key="b.key" class="summary-card" :style="cardStyle(b.color)">
|
|
<span class="summary-count">{{ counts[b.key] || 0 }}</span>
|
|
<span class="summary-label">{{ b.label }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<template v-for="b in bucketOrder" :key="b.key">
|
|
<div class="bucket card" v-if="(buckets[b.key] || []).length">
|
|
<h3 class="bucket-title">
|
|
<span class="dot" :style="{ background: b.color }"></span>
|
|
{{ b.label }} ({{ (buckets[b.key] || []).length }})
|
|
</h3>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Asset #</th>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Next Calibration</th>
|
|
<th>Provider</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="row in buckets[b.key]" :key="row.assetid">
|
|
<td>
|
|
<router-link :to="`/measuringtools/${row.measuringtool.measuringtoolid}`" class="asset-chip">
|
|
{{ row.assetnumber }}
|
|
</router-link>
|
|
</td>
|
|
<td>{{ row.name || '-' }}</td>
|
|
<td>{{ row.measuringtool.measuringtooltypename || '-' }}</td>
|
|
<td>{{ row.measuringtool.nextcalibrationdate ? formatDate(row.measuringtool.nextcalibrationdate) : '-' }}</td>
|
|
<td>{{ row.measuringtool.calibrationprovider || '-' }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { measuringtoolsApi } from '@/api'
|
|
|
|
const loading = ref(true)
|
|
const counts = ref({})
|
|
const buckets = ref({})
|
|
|
|
const bucketOrder = [
|
|
{ key: 'overdue', label: 'Overdue', color: '#F44336' },
|
|
{ key: 'duesoon', label: 'Due Soon', color: '#FF9800' },
|
|
{ key: 'current', label: 'Current', color: '#4CAF50' },
|
|
{ key: 'unknown', label: 'Unknown', color: '#9E9E9E' },
|
|
]
|
|
|
|
function formatDate(d) { return new Date(d + 'T00:00:00').toLocaleDateString() }
|
|
function cardStyle(color) { return { borderTop: `3px solid ${color}` } }
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const response = await measuringtoolsApi.calibrationReport()
|
|
counts.value = response.data.data.counts || {}
|
|
buckets.value = response.data.data.buckets || {}
|
|
} catch (err) {
|
|
console.error('Error loading calibration report:', err)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.summary-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
|
|
.summary-card {
|
|
flex: 1; min-width: 140px; padding: 1rem 1.25rem; background: var(--bg-card);
|
|
border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; gap: 0.25rem;
|
|
}
|
|
.summary-count { font-size: 1.8rem; font-weight: 700; color: var(--text); }
|
|
.summary-label { font-size: 0.85rem; color: var(--text-light); }
|
|
.bucket { margin-bottom: 1.25rem; }
|
|
.bucket-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; }
|
|
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
|
|
.asset-chip {
|
|
display: inline-block; padding: 0.15rem 0.55rem;
|
|
background: var(--bg); border-radius: 12px; font-size: 0.85rem; text-decoration: none; color: var(--text);
|
|
}
|
|
</style>
|