@7365admin1/layer-common 3.2.2-staging.91 → 3.2.2-staging.93

package/.changeset/pm-sidebar-grouping-and-list-scaffold.md

@@ -0,0 +1,27 @@
+---
+"@7365admin1/layer-common": patch
+---
+
+Group the sidebar's sections and give the list screens the design's page
+scaffold.
+
+- `withSections()` walked each application's menu in the order it was given and
+  printed a heading whenever the section changed, so Property Management drew
+  SERVICE DESK, PROPERTY and SECURITY OPERATIONS **twice each**. Items are now
+  grouped under one heading per section, in the order the design lists them,
+  with the application's own order kept inside each section. No menu item is
+  added, hidden, renamed, re-routed or re-gated.
+- `ServiceProviderMain`, `FeedbackMain`, `InvitationMain` and `WorkOrder/Main`
+  had no page title, put their primary action top-left, floated the search
+  outside the card, and stacked the refresh/pager on a bar above the tabs. They
+  now use `PageHeader` / `AppCard` / `CardToolbar` / `AppButton` / `AppField`:
+  a 22px title with the action on the right, then one in-card row with the tabs
+  on the left and search, count and pager on the right.
+- `SwitchContext` and the rail's application name print in full instead of
+  truncating to "Seventh Cond…" / "Property Managem…".
+- The security dashboard's `ACTIVE PATROL` / `STAFF STATUS` panel headings are
+  written the way the design writes them, matching their sibling panels.
+
+Placement and wording only: the same buttons open the same dialogs under the
+same permissions, the same tabs load the same lists, and the tables, columns,
+filters and row menus are untouched.

package/assets/css/primitives.css

@@ -108,6 +108,9 @@
 .app-toolbar {
   display: flex;
   align-items: center;
+  /* One row at desktop widths, as drawn. On a phone the tabs and the
+     search/pager group drop onto their own lines rather than overflow. */
+  flex-wrap: wrap;
   gap: 22px;
   padding: 0 var(--cellpad-x);
   border-bottom: 1px solid var(--border);
@@ -129,6 +132,14 @@
   gap: 8px;
 }
 
+/* The list toolbar's own search box. `--search` alone stretches (it is written
+   for the filter row), which would push the pager off the end of the row. */
+.app-toolbar__search.app-field--search {
+  flex: 0 0 auto;
+  width: 200px;
+  min-width: 0;
+}
+
 .app-toolbar__count {
   font-size: 12.5px;
   font-weight: 600;
@@ -161,6 +172,9 @@
   color: var(--muted);
   white-space: nowrap;
   cursor: pointer;
+  /* A tab is a <button> on the screens that switch a list in place and a link
+     on the ones that route (Invitations), so the underline has to be ours. */
+  text-decoration: none;
 }
 
 .app-tab:hover {
@@ -408,6 +422,139 @@ select.app-field__input {
   }
 }
 
+/* ------------------------------------------------------------------ */
+/* SegmentedControl - Today | Week | Month.                            */
+/* ------------------------------------------------------------------ */
+
+/**
+ * The handoff draws this as a 3px-padded bordered tray holding 8px-radius
+ * segments; the SELECTED one is an ACCENT FILL, not a grey one. Vuetify's
+ * `v-btn-toggle` cannot be talked into that shape (its own height scale, its
+ * dividers, its overlay layer), so the tray is written as markup.
+ *
+ * The fill is `--accent-strong`, not `--accent`: white on `--accent` measures
+ * 3.23:1, the same Phase-1 rule every other filled label follows.
+ */
+.app-seg {
+  display: flex;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+}
+
+.app-seg__item {
+  padding: 6px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 700;
+  line-height: 1.2;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.app-seg__item:hover {
+  background: var(--hover);
+}
+
+.app-seg__item--on,
+.app-seg__item--on:hover {
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+}
+
+/* ------------------------------------------------------------------ */
+/* KpiTile - the dashboard's headline figure.                          */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Three rows, in this order, straight from the handoff:
+ *   1. a 34px soft icon square and the uppercase label, side by side
+ *   2. the 30px tabular number with its percentage pill BESIDE it
+ *   3. the sub-line
+ * The product had the icon alone on row 1 and the pill stranded at the
+ * bottom, which is why the tile read as a different component.
+ */
+.app-kpi {
+  padding: 18px;
+}
+
+.app-kpi__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.app-kpi__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 34px;
+  border-radius: var(--r-inner);
+}
+
+.app-kpi__label {
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  color: var(--muted);
+  min-width: 0;
+}
+
+.app-kpi__action {
+  margin-left: auto;
+  flex: 0 0 auto;
+}
+
+.app-kpi__figure {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.app-kpi__value {
+  font-size: var(--fs-kpi);
+  font-weight: var(--fw-kpi);
+  letter-spacing: var(--ls-kpi);
+  line-height: 1.1;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
+}
+
+.app-kpi__chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 800;
+  line-height: 1.2;
+  background: var(--ok-bg);
+  color: var(--ok);
+}
+
+.app-kpi__chip--down {
+  background: var(--err-bg);
+  color: var(--err);
+}
+
+.app-kpi__sub {
+  margin-top: 6px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
 /* ------------------------------------------------------------------ */
 /* Responsive - the prototype has no reference, this follows Phase 1.  */
 /* ------------------------------------------------------------------ */

package/components/AppKpiTile.vue

@@ -0,0 +1,65 @@
+<!--
+  THE KPI TILE.
+
+  The handoff's tile is three rows: the soft icon square AND the uppercase
+  label together on the first, the big tabular number with its percentage pill
+  BESIDE it on the second, the sub-line on the third. The product had the icon
+  alone on a row of its own, the label under it, and the pill stranded at the
+  bottom next to the sub-line - the same figures in a different shape.
+
+  It draws what it is given and nothing else: no fetch, no formatting, no
+  threshold logic. `#action` is the far end of the first row (a filter menu, a
+  "View All"); `#default`, when given, replaces the figure rows entirely for
+  the tiles that list items instead of counting them.
+-->
+<template>
+  <AppCard class="app-kpi d-flex flex-column flex-grow-1">
+    <div class="app-kpi__head">
+      <span
+        v-if="icon"
+        class="app-kpi__icon"
+        :style="tint ? { backgroundColor: tint } : undefined"
+      >
+        <v-icon :icon="icon" :color="color || undefined" size="19" />
+      </span>
+
+      <span class="app-kpi__label">{{ label }}</span>
+
+      <span v-if="$slots.action" class="app-kpi__action">
+        <slot name="action" />
+      </span>
+    </div>
+
+    <slot>
+      <div class="app-kpi__figure">
+        <span class="app-kpi__value">{{ value }}</span>
+
+        <span
+          v-if="chip"
+          class="app-kpi__chip"
+          :class="{ 'app-kpi__chip--down': down }"
+        >
+          {{ chip }}
+        </span>
+      </div>
+
+      <div v-if="sub" class="app-kpi__sub">{{ sub }}</div>
+    </slot>
+  </AppCard>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  icon: { type: String, default: "" },
+  /** The icon square's soft fill - a token-derived colour from the caller. */
+  tint: { type: String, default: "" },
+  color: { type: String, default: "" },
+  label: { type: String, default: "" },
+  value: { type: [String, Number], default: "" },
+  /** The percentage pill's text, already formatted by the caller. */
+  chip: { type: String, default: "" },
+  /** Draws the pill in the error tone rather than the success one. */
+  down: { type: Boolean, default: false },
+  sub: { type: String, default: "" },
+});
+</script>

package/components/AppSegmented.vue

@@ -0,0 +1,38 @@
+<!--
+  THE SEGMENTED CONTROL - `Today | Week | Month`.
+
+  A tray of plain `<button>`s, not a `v-btn-toggle`. The toggle brings its own
+  height scale, dividers, ripple and overlay layer, and its selected state is
+  drawn from `on-surface` - which is why the product's selected segment reads
+  grey where the design fills it with the accent.
+
+  Selection only: it writes the same `v-model` the toggle wrote, and the value
+  set is whatever the caller passes. No behaviour is added here.
+-->
+<template>
+  <div class="app-seg" role="group">
+    <button
+      v-for="option in options"
+      :key="String(option.value)"
+      type="button"
+      class="app-seg__item"
+      :class="{ 'app-seg__item--on': model === option.value }"
+      :aria-pressed="model === option.value"
+      @click="model = option.value"
+    >
+      {{ option.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  /** `{ label, value }` - the same option list the toggle was given. */
+  options: {
+    type: Array as PropType<Array<{ label: string; value: any }>>,
+    default: () => [],
+  },
+});
+
+const model = defineModel<any>({ default: "" });
+</script>

package/components/Avatar/Main.vue

@@ -1,6 +1,18 @@
 <template>
     <v-avatar :color="getColor(name || id)" :size="size">
-        <v-img v-if="imageSrc" alt="John" :src="imageUrl" />
+        <!--
+          A stored profile photo that 404s left the circle EMPTY - `v-img`
+          draws nothing when the source fails, and there was no fallback under
+          it. The initials the avatar already computes stand in, so the circle
+          is never blank.
+        -->
+        <v-img v-if="imageSrc" :alt="name" :src="imageUrl">
+            <template #error>
+                <div class="d-flex align-center justify-center fill-height">
+                    <span :style="{ fontSize: `${fontSize}px` }">{{ initials }}</span>
+                </div>
+            </template>
+        </v-img>
         <span v-else :style="{
             fontSize: `${fontSize}px`,
             lineHeight: `${size}px`

package/components/DashboardMain.vue

@@ -203,44 +203,36 @@
 
   <section v-else class="unified-dashboard pb-8">
     <!-- ── Header ──────────────────────────────────────────────────────────── -->
-    <div
-      class="d-flex flex-column flex-md-row align-md-start justify-space-between ga-5 mb-6"
+    <PageHeader
+      :title="dashboardTitle"
+      :subtitle="currentSiteName || 'Selected site'"
+      subtitle-icon="mdi-map-marker"
     >
-      <div>
-        <h1 class="dashboard-title mb-0">
-          {{ dashboardTitle }}
-        </h1>
-        <div class="d-flex align-center text-medium-emphasis ga-1 mt-2 text-caption">
-          <v-icon icon="mdi-map-marker" size="16" />
-          <span>{{ currentSiteName || "Selected site" }}</span>
-        </div>
-      </div>
-
-      <div
-        v-if="showHeaderActions"
-        class="d-flex flex-wrap align-center justify-md-end ga-3"
-      >
-        <v-btn
-          variant="outlined"
-          class="text-none font-weight-bold"
-          prepend-icon="mdi-tune-variant"
+      <!--
+        The design's three actions: two 38px ghost buttons and the accent
+        segmented control. Same dialog, same export menu, same range model -
+        `Customize Dashboard` and `Export` shorten to the labels the prototype
+        prints, and the export menu keeps both of its formats.
+      -->
+      <template v-if="showHeaderActions" #actions>
+        <AppButton
+          variant="ghost"
+          icon="mdi-tune-variant"
           @click="openCustomizeDialog"
         >
-          Customize Dashboard
-        </v-btn>
+          Customize
+        </AppButton>
 
         <v-menu>
           <template #activator="{ props: menuProps }">
-            <v-btn
+            <AppButton
               v-bind="menuProps"
-              variant="outlined"
-              class="text-none font-weight-bold"
-              append-icon="mdi-chevron-down"
-              :loading="isExporting"
+              variant="ghost"
+              icon="mdi-download-outline"
               :disabled="isExporting"
             >
               Export
-            </v-btn>
+            </AppButton>
           </template>
 
           <v-list density="compact" border rounded="lg" elevation="3">
@@ -249,36 +241,9 @@
           </v-list>
         </v-menu>
 
-        <v-btn-toggle
-          v-model="selectedRange"
-          mandatory
-          density="comfortable"
-          divided
-          variant="outlined"
-          class="bg-surface"
-          style="border-radius: 8px"
-        >
-          <v-btn
-            v-for="range in rangeOptions"
-            :key="range.value"
-            :value="range.value"
-            class="text-none"
-            size="small"
-            :style="
-              selectedRange === range.value
-                ? {
-                    backgroundColor: 'rgba(var(--v-theme-on-surface), 0.12)',
-                    color: 'rgb(var(--v-theme-on-surface))',
-                    fontWeight: '600',
-                  }
-                : { backgroundColor: 'transparent', color: 'rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))' }
-            "
-          >
-            {{ range.label }}
-          </v-btn>
-        </v-btn-toggle>
-      </div>
-    </div>
+        <AppSegmented v-model="selectedRange" :options="rangeOptions" />
+      </template>
+    </PageHeader>
 
     <v-progress-linear
       v-if="finalLoading"
@@ -298,20 +263,24 @@
         lg="3"
         class="d-flex"
       >
-        <v-card
-          flat
-          class="dashboard-card dashboard-kpi-card pa-4 flex-grow-1"
-          style="min-height: 158px"
+        <!--
+          The same figures the tile has always shown, in the arrangement the
+          handoff draws them: icon and label on one row, the number with its
+          percentage pill beside it, the sub-line under both. The filter menu
+          and the facility "View All" keep their place at the end of the first
+          row and do exactly what they did.
+        -->
+        <AppKpiTile
+          :icon="card.icon"
+          :tint="card.tint"
+          :color="card.color"
+          :label="card.title"
+          :value="card.value"
+          :chip="kpiChipText(card)"
+          :down="Number(card.percentage) < 0"
+          :sub="card.meta"
         >
-          <div class="d-flex align-start justify-space-between">
-            <div
-              class="d-inline-flex align-center justify-center rounded-lg"
-              style="height: 28px; width: 28px; flex-shrink: 0"
-              :style="{ backgroundColor: card.tint }"
-            >
-              <v-icon :icon="card.icon" :color="card.color" size="15" />
-            </div>
-
+          <template v-if="card.filter || card.key === 'facilityBookings'" #action>
             <v-menu v-if="card.filter" v-model="filterMenus[card.key]">
               <template #activator="{ props: menuProps }">
                 <v-btn
@@ -355,59 +324,24 @@
             >
               View All
             </button>
-          </div>
+          </template>
 
-          <div class="mt-6 w-100">
-            <p class="dashboard-kpi-label mb-3">
-              {{ card.title }}
-            </p>
-            <template
-              v-if="
-                card.key === 'supplyAlert' && Array.isArray(card.raw?.items)
-              "
-            >
-              <div class="d-flex flex-column ga-2 mt-2">
-                <div
-                  v-for="item in card.raw.items"
-                  :key="item._id || item.name"
-                  class="d-flex justify-space-between text-body-2 text-high-emphasis font-weight-medium"
-                >
-                  <span>{{ item.name }}</span>
-                  <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
-                </div>
-              </div>
-            </template>
-            <template v-else>
-              <div class="d-flex align-center mb-3" style="min-height: 31px">
-                <span class="dashboard-kpi-value">
-                  {{ card.value }}
-                </span>
-              </div>
-              <div class="d-flex align-center flex-wrap ga-2">
-                <span v-if="card.meta" class="text-caption text-medium-emphasis">{{
-                  card.meta
-                }}</span>
-                <v-chip
-                  :color="card.percentage >= 0 ? 'success' : 'error'"
-                  size="x-small"
-                  variant="flat"
-                  class="font-weight-bold"
-                >
-                  <v-icon
-                    :icon="
-                      card.percentage >= 0
-                        ? 'mdi-arrow-up-right'
-                        : 'mdi-arrow-down-right'
-                    "
-                    size="13"
-                    start
-                  />
-                  {{ Math.abs(card.percentage) }}%
-                </v-chip>
+          <!-- The supply tile lists items instead of counting one figure. -->
+          <template
+            v-if="card.key === 'supplyAlert' && Array.isArray(card.raw?.items)"
+          >
+            <div class="d-flex flex-column ga-2">
+              <div
+                v-for="item in card.raw.items"
+                :key="item._id || item.name"
+                class="d-flex justify-space-between text-body-2 text-high-emphasis font-weight-medium"
+              >
+                <span>{{ item.name }}</span>
+                <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
               </div>
-            </template>
-          </div>
-        </v-card>
+            </div>
+          </template>
+        </AppKpiTile>
       </v-col>
     </v-row>
 
@@ -954,7 +888,7 @@
       <v-col v-if="isWidgetVisible('activePatrol')" cols="12" lg="6">
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
-            <h2>ACTIVE PATROL</h2>
+            <h2>Active Patrol</h2>
             <button
               class="figma-panel-action"
               type="button"
@@ -1034,7 +968,7 @@
       <v-col v-if="isWidgetVisible('staffStatus')" cols="12" lg="6">
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
-            <h2>STAFF STATUS</h2>
+            <h2>Staff Status</h2>
             <button
               class="figma-panel-action"
               type="button"
@@ -2491,6 +2425,17 @@ const visibleKpiCards = computed(() =>
   kpiCards.value.filter((card) => isWidgetVisible(card.key))
 );
 
+/**
+ * The percentage pill's label. Same number the chip has always shown, written
+ * the way the handoff prints it - `+0%` / `-6.4%`, the sign carrying what the
+ * arrow icon used to. A card without a percentage gets no pill.
+ */
+function kpiChipText(card: Record<string, any>): string {
+  const value = Number(card?.percentage);
+  if (!Number.isFinite(value)) return "";
+  return `${value < 0 ? "-" : "+"}${Math.abs(value)}%`;
+}
+
 // ─── Dashboard Title ──────────────────────────────────────────────────────────
 
 const dashboardTitle = computed(() => {

package/components/FeedbackMain.vue

@@ -1,5 +1,15 @@
 <template>
-  <v-row no-gutters>
+  <div>
+    <!-- The design's title row: the page's name at 22px and its primary
+         action on the right of that same line. Placement only - the same
+         button opens the same dialog under the same permission. -->
+    <PageHeader title="Feedbacks">
+      <template v-if="canCreateFeedback" #actions>
+        <AppButton @click="showCreateDialog = true">Create Feedback</AppButton>
+      </template>
+    </PageHeader>
+
+    <v-row no-gutters>
     <v-col cols="12" class="mb-2">
       <v-row no-gutters align="center" class="filter-bar">
         <v-text-field
@@ -50,47 +60,32 @@
             <v-date-picker v-model="endDate" width="320" :locale="locale" />
           </v-card>
         </v-dialog>
-        <v-btn
-          v-if="canCreateFeedback"
-          text="create feedback"
-          class="text-none text-capitalize ml-2 screen-btn-primary filter-bar__fit"
-          variant="flat"
-          @click="showCreateDialog = true"
-        />
       </v-row>
     </v-col>
 
     <v-col cols="12">
-      <v-card width="100%" variant="flat" class="table-card" :loading="loading">
-        <v-toolbar
-          density="compact"
-          color="transparent"
-          class="table-card__toolbar"
-        >
-          <template #prepend>
-            <v-btn
-              fab
-              icon
-              density="comfortable"
+      <AppCard class="table-card">
+        <!-- One row inside the card - refresh, the range and the pager - in
+             place of a `v-toolbar` that stacked them above the table. Same
+             three controls, same handlers. -->
+        <CardToolbar :count="pageRange">
+          <template #left>
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
               @click="(page = 1), refreshFeedbacks()"
-            >
-              <v-icon icon="mdi-refresh" />
-            </v-btn>
+            />
           </template>
 
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 table-card__range">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="updatePage"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="updatePage"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
 
         <v-data-table
           :headers="headers"
@@ -100,6 +95,7 @@
           fixed-header
           hide-default-footer
           :hide-default-header="false"
+          :loading="loading"
           @click:row="tableRowClickHandler"
           style="max-height: calc(100vh - (200px))"
         >
@@ -173,9 +169,10 @@
             <span v-else class="mt-1 text-wrap"> Not Assigned </span>
           </template>
         </v-data-table>
-      </v-card>
+      </AppCard>
     </v-col>
-  </v-row>
+    </v-row>
+  </div>
 
   <!-- <FeedbackForm
     v-model="showCreateDialog"