shopdb-flask/frontend/src/views/Dashboard.vue

<template>
  <div>
    <div class="page-header">
      <h2>Dashboard</h2>
    </div>

    <div v-if="loading" class="loading">Loading...</div>

    <template v-else>
      <!-- The board: a severity rollup, one worst-first queue of what needs a
           person, and a rail of context. Cards are declared by plugins
           (get_dashboard_widgets) and rendered generically; an empty or failed
           card hides itself. See docs/proposals/dashboard-live-fleet.md.

           Inventory goes in the rail through the slot, because a count is not
           an exception and DashboardCards has no business declaring one. -->
      <DashboardCards>
        <template #rail>
          <section class="dc-panel estate">
            <header class="estate-head">
              <h3>Estate</h3>
              <router-link to="/reports" class="estate-link">Reports</router-link>
            </header>

            <!-- One line per asset type, then the total under a rule.
                 These used to be seven equal tiles in which four of them summed
                 to a fifth: machines + PCs + printers + network IS all assets,
                 shown beside its own addends at the same weight. A total that
                 looks like a sixth category invites people to add it in again.
                 Two of the seven also counted STATUS rather than type without
                 saying so. -->
            <div class="estate-row">
              <router-link to="/machines" class="estate-k">Machines</router-link>
              <span class="estate-v">{{ stats.totalmachines || 0 }}</span>
            </div>
            <div class="estate-row">
              <router-link to="/pcs" class="estate-k">PCs</router-link>
              <span class="estate-v">{{ stats.totalpc || 0 }}</span>
            </div>
            <div class="estate-row">
              <router-link to="/printers" class="estate-k">Printers</router-link>
              <span class="estate-v">{{ stats.totalprinter || 0 }}</span>
            </div>
            <div class="estate-row">
              <router-link to="/network" class="estate-k">Network devices</router-link>
              <span class="estate-v">{{ stats.totalnetwork || 0 }}</span>
            </div>

            <div class="estate-row estate-total">
              <span class="estate-k">All assets</span>
              <span class="estate-v">{{ stats.totalassets || 0 }}</span>
            </div>

            <!-- Status, on one line, and explicitly labelled as status. In
                 repair is muted at zero rather than given a card of its own to
                 announce that nothing is wrong. -->
            <p class="estate-status">
              <span class="estate-inuse">{{ stats.activeassets || 0 }}</span> in use
              <span aria-hidden="true"> / </span>
              <span :class="{ 'estate-zero': !stats.inrepair }">
                {{ stats.inrepair || 0 }} in repair
              </span>
            </p>
          </section>
        </template>
      </DashboardCards>
    </template>
  </div>
</template>

<script setup>
// WHAT THIS PAGE DROPPED, and why, so it does not come back by accident:
//
// The printer strip (Total / Online / Low Supplies / Critical). It repeated the
// printer count a third time - the tile row and "Total Printers" were already
// the same number - and "Online" equalled total, so three tiles carried one
// fact. Supplies are already a dashboard card the printers plugin declares
// (printers-supplies, severity warning), so a genuinely low cartridge reaches
// the queue where it can be acted on, instead of sitting in a tile reading 0.
//
// Recent Devices. It was the largest block on the page and listed five machines
// that were all "In Use" with business unit "TBD". Recency is not a reason to
// look at something, and it cost more vertical space than everything that
// needed a person put together. A filtered "recently changed" view belongs in
// Reports.
import DashboardCards from '@/components/DashboardCards.vue'
import { ref, onMounted } from 'vue'
import { dashboardApi } from '../api'

const loading = ref(true)
const stats = ref({})

onMounted(async () => {
  try {
    const response = await dashboardApi.summary().catch(() => ({ data: { data: {} } }))
    stats.value = response.data.data || {}
  } catch (error) {
    console.error('Dashboard load error:', error)
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
/* Matches the panels in DashboardCards; the rail reads as one column rather
   than as a page card that happens to sit beside them. */
.estate {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1rem 0.9rem;
  min-width: 0;
}

.estate-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.estate-head h3 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  flex: 1 1 auto;
}
.estate-link {
  font-size: 0.78rem;
  color: var(--link);
  text-decoration: none;
}
.estate-link:hover { text-decoration: underline; }

.estate-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border);
}
.estate-row:last-of-type { border-bottom: none; }

.estate-k {
  color: var(--link);
  text-decoration: none;
  font-size: 0.9rem;
}
a.estate-k:hover { text-decoration: underline; }
span.estate-k { color: var(--text); font-weight: 600; }

.estate-v {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.estate-total {
  margin-top: 0.35rem;
  border-top: 2px solid var(--border);
  border-bottom: none;
}

.estate-status {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--text-light);
}
.estate-inuse { color: var(--success); font-weight: 600; font-variant-numeric: tabular-nums; }
.estate-zero { color: var(--text-light); }
</style>