@7365admin1/layer-common 3.2.2-staging.92 → 3.2.2-staging.94

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 {

package/assets/css/screens.css

@@ -361,6 +361,20 @@
   border-bottom: 1px solid var(--border);
 }
 
+/**
+ * The callers' filter row (`#extension`). It was a `v-toolbar` extension, i.e.
+ * a fixed-height second bar; it is now a plain row under the toolbar with the
+ * same rule under it, so it can size to whatever the caller puts in it.
+ */
+.table-card__extension {
+  border-bottom: 1px solid var(--border);
+}
+
+.table-card__loading {
+  position: absolute;
+  z-index: 1;
+}
+
 .table-card__range {
   font-size: 12px;
   font-weight: 600;

package/components/DashboardMain.vue

@@ -888,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"
@@ -968,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"

package/components/EquipmentItemMain.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12" lg="12">
       <TableMain
-        :title="`${siteName} Units`"
+        :title="`${siteName} Equipment Items`"
         :items="items"
         :headers="headers"
         :loading="loading"

package/components/EquipmentManagementMain.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12" lg="12">
       <TableMain
-        :title="`${siteName} Units`"
+        :title="`${siteName} Equipment`"
         :items="items"
         :headers="headers"
         :loading="loading"

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"

package/components/InvitationMain.vue

@@ -1,69 +1,45 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn
-          class="text-none mr-2 screen-btn-primary"
-          variant="flat"
-          @click="inviteMember()"
-          v-if="props.inviteMember"
-        >
-          Invite member
-        </v-btn>
-      </v-row>
-    </v-col>
+  <div>
+    <!-- The design's page scaffold: a title with the action on the right of
+         that line, then ONE row inside the card - the two tabs on the left,
+         refresh, the range and the pager on the right. The tabs route exactly
+         as they did; only where they sit has changed. -->
+    <PageHeader title="Invitations">
+      <template v-if="props.inviteMember" #actions>
+        <AppButton @click="inviteMember()">Invite member</AppButton>
+      </template>
+    </PageHeader>
+
+    <v-row no-gutters>
     <v-col cols="12">
-      <v-card width="100%" variant="flat" class="table-card">
-        <v-toolbar
-          density="compact"
-          color="transparent"
-          class="table-card__toolbar"
-        >
-          <template #prepend>
-            <v-btn
-              fab
-              icon
-              density="comfortable"
-              @click="getVerifications()"
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #tabs>
+            <NuxtLink
+              v-for="tab in invitationTabs"
+              :key="tab.status"
+              class="app-tab"
+              :class="{ 'app-tab--active': props.status === tab.status }"
+              :to="{ name: props.route, params: { status: tab.status } }"
             >
-              <v-icon>mdi-refresh</v-icon>
-            </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="getVerifications"
-              />
-            </v-row>
+              {{ tab.label }}
+            </NuxtLink>
           </template>
 
-          <template #extension>
-            <v-tabs>
-              <v-tab
-                :to="{
-                  name: props.route,
-                  params: { status: 'pending' },
-                }"
-              >
-                Pending
-              </v-tab>
-              <v-tab
-                :to="{
-                  name: props.route,
-                  params: { status: 'expired' },
-                }"
-              >
-                Expired
-              </v-tab>
-            </v-tabs>
+          <template #right>
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
+              @click="getVerifications()"
+            />
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="getVerifications"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
 
         <v-data-table
           :headers="headers"
@@ -105,7 +81,7 @@
             {{ formatStatus(value) }}
           </template>
         </v-data-table>
-      </v-card>
+      </AppCard>
     </v-col>
 
     <ConfirmDialog
@@ -155,10 +131,17 @@
         :app="props.app"
       />
     </v-dialog>
-  </v-row>
+    </v-row>
+  </div>
 </template>
 
 <script setup lang="ts">
+/** The same two tabs, same labels, same routes. */
+const invitationTabs = [
+  { status: "pending", label: "Pending" },
+  { status: "expired", label: "Expired" },
+];
+
 const props = defineProps({
   app: {
     type: String,

package/components/Layout/NavigationDrawer.vue

@@ -283,9 +283,10 @@ const handleClick = (item: any) => {
   font-weight: var(--fw-card-title);
   line-height: 1.2;
   color: var(--text);
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  /* The design prints the application's name in full ("Property Management").
+     Truncating it to "Property Managem…" in a 252px rail loses the word that
+     tells the user which product they are in, so it wraps instead. */
+  overflow-wrap: anywhere;
   text-transform: capitalize;
 }
 

package/components/ServiceProviderMain.vue

@@ -1,108 +1,91 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-3">
-      <v-row no-gutters align="center" justify="space-between">
-        <div class="d-flex flex-wrap align-center">
-          <v-btn
-            v-if="showAddButton && canAddServiceProvider"
-            class="text-none mr-2 screen-btn-primary"
-            variant="flat"
-            @click="(createDialog = true), setServiceProvider({ mode: 'add' })"
-          >
-            Add
-          </v-btn>
-          <v-btn
-            v-if="canInviteServiceProvider"
-            class="text-none mr-2 screen-btn-primary"
-            variant="flat"
-            @click="
-              (createInviteDialog = true),
-                setServiceProvider({ mode: 'invite' })
-            "
-          >
-            Invite
-          </v-btn>
-          <v-btn
-            v-if="showBillingButton"
-            class="text-none mr-2 screen-btn-primary"
-            variant="flat"
-            @click="
-              useRouter().push({
-                name: 'org-site-service-provider-mgmt-billing',
-              })
-            "
-          >
-            Billing
-          </v-btn>
-        </div>
-
-        <v-text-field
-          v-model="searchText"
-          placeholder="Search"
-          variant="outlined"
-          density="comfortable"
-          clearable
-          hide-details
-          prepend-inner-icon="mdi-magnify"
-          class="ml-2"
-          style="max-width: 280px"
-        />
-      </v-row>
-    </v-col>
-
-    <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="flat"
-        class="table-card"
-        :loading="loading"
-      >
-        <div class="sp-table-header">
-          <!-- No fixed colour: `grey-lighten-4` is a light-mode grey in both
-               themes, which is what made this strip a white slab in dark
-               mode. `transparent` lets the themed .sp-table-header show. -->
-          <v-toolbar
-            density="compact"
-            color="transparent"
-            flat
-            class="sp-toolbar-top px-2"
-          >
-            <v-btn
-              icon
-              variant="text"
-              density="comfortable"
-              @click="loadList()"
-            >
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-
-            <v-spacer />
-
-            <template v-if="canViewServiceProviders">
-              <span class="mr-2 text-caption text-medium-emphasis">{{
-                pageRange
-              }}</span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="loadList()"
-              />
-            </template>
-          </v-toolbar>
-
-          <v-tabs
-            v-model="listTab"
-            color="primary"
-            density="comfortable"
-            class="sp-tabs screen-tabs"
-            align-tabs="start"
+  <div>
+    <!--
+      THE DESIGN'S PAGE SCAFFOLD (same shape as Members).
+
+      The screen had no title at all, its primary actions sat top-LEFT, the
+      search box floated outside the card, and the refresh + pager sat on one
+      row with the tabs stacked on a second row below. The design draws a 22px
+      title with the actions on the right of that line, then ONE row inside the
+      card: tabs left, search / refresh / count / pager right.
+
+      Placement only. The same buttons open the same dialogs under the same
+      permission conditions, the same three tabs load the same three lists, the
+      same search feeds the same debounced `loadList()`, and the table, its
+      columns and its row menu are untouched.
+    -->
+    <PageHeader title="Service Providers">
+      <template #actions>
+        <AppButton
+          v-if="showBillingButton"
+          variant="ghost"
+          @click="
+            useRouter().push({
+              name: 'org-site-service-provider-mgmt-billing',
+            })
+          "
+        >
+          Billing
+        </AppButton>
+        <AppButton
+          v-if="showAddButton && canAddServiceProvider"
+          variant="ghost"
+          @click="(createDialog = true), setServiceProvider({ mode: 'add' })"
+        >
+          Add
+        </AppButton>
+        <AppButton
+          v-if="canInviteServiceProvider"
+          @click="
+            (createInviteDialog = true), setServiceProvider({ mode: 'invite' })
+          "
+        >
+          Invite
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <AppCard class="table-card">
+      <CardToolbar :count="canViewServiceProviders ? pageRange : ''">
+        <template #tabs>
+          <button
+            v-for="tab in listTabs"
+            :key="tab.value"
+            type="button"
+            role="tab"
+            class="app-tab"
+            :class="{ 'app-tab--active': listTab === tab.value }"
+            :aria-selected="listTab === tab.value"
+            @click="listTab = tab.value"
           >
-            <v-tab value="active" class="text-none">Service Providers</v-tab>
-            <v-tab value="pending" class="text-none">Pending</v-tab>
-            <v-tab value="inactive" class="text-none">In-Active</v-tab>
-          </v-tabs>
-        </div>
-
+            {{ tab.label }}
+          </button>
+        </template>
+
+        <template #right>
+          <AppField
+            v-model="searchText"
+            search
+            compact
+            placeholder="Search"
+            klass="app-toolbar__search"
+          />
+          <AppButton
+            variant="icon"
+            icon="mdi-refresh"
+            aria-label="Refresh"
+            @click="loadList()"
+          />
+          <local-pagination
+            v-if="canViewServiceProviders"
+            v-model="page"
+            :length="pages"
+            @update:value="loadList()"
+          />
+        </template>
+      </CardToolbar>
+
+      <div class="app-table-scroll">
         <v-data-table
           v-if="canViewServiceProviders"
           :headers="headers"
@@ -111,6 +94,7 @@
           :items-per-page="pageSize"
           fixed-header
           hide-default-footer
+          :loading="loading"
           class="sp-table"
           style="max-height: calc(100vh - 280px)"
         >
@@ -222,12 +206,16 @@
             </v-menu>
           </template>
         </v-data-table>
-        <v-card-text v-else class="text-body-2 text-medium-emphasis">
-          You do not have permission to view service providers.
-        </v-card-text>
-      </v-card>
-    </v-col>
-  </v-row>
+      </div>
+
+      <div
+        v-if="!canViewServiceProviders"
+        class="pa-4 text-body-2 text-medium-emphasis"
+      >
+        You do not have permission to view service providers.
+      </div>
+    </AppCard>
+  </div>
 
   <v-dialog v-model="viewDialog" max-width="514">
     <v-card rounded="lg" class="sp-members-card">
@@ -791,6 +779,12 @@ const { requiredRule, emailRule, debounce } = useUtils();
 const { getUserByEmail } = useUser();
 
 const listTab = ref<ListTab>("active");
+/** The same three tabs, in the same order, with the same labels. */
+const listTabs: Array<{ value: ListTab; label: string }> = [
+  { value: "active", label: "Service Providers" },
+  { value: "pending", label: "Pending" },
+  { value: "inactive", label: "In-Active" },
+];
 const page = ref(1);
 const pages = ref(0);
 const pageRange = ref("-- - -- of --");
@@ -1489,32 +1483,8 @@ async function submitServiceProviderInvite() {
 </script>
 
 <style scoped>
-.sp-toolbar-top {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  gap: 4px;
-}
-
-.sp-table-header {
-  /* Was a hardcoded #f5f5f5 with a black border: in dark mode the tab strip
-     became a white slab and the tab labels and the page range disappeared
-     into it. These take the colour of whichever theme they are in. */
-  background: rgb(var(--v-theme-surface-light, var(--v-theme-surface)));
-  border-bottom: 1px solid
-    rgba(var(--v-border-color), var(--v-border-opacity));
-}
-
-.sp-tabs {
-  width: 100%;
-  min-height: 40px;
-}
-
-.sp-tabs :deep(.v-tab) {
-  min-width: 120px;
-  justify-content: flex-start;
-  text-transform: none;
-}
+/* The tab strip's own theming went with the strip: the tabs are the card's
+   first row now and take `.app-tab` from the shared primitives. */
 
 .sp-col-company {
   max-width: 220px;

package/components/SwitchContext.vue

@@ -15,7 +15,10 @@
           :to="props.route"
           class="text-subtitle-2 font-weight-bold"
         >
-          <v-list-item-title class="text-truncate">
+          <!-- The design prints the organisation and site names in full.
+               Vuetify's list-item title truncates by default, which cut them
+               to "Property Managem…" / "Seventh Cond…" in the 252px rail. -->
+          <v-list-item-title class="switch-context__name">
             {{ name || `Select ${prop.title}` }}
           </v-list-item-title>
         </v-list-item>
@@ -124,3 +127,14 @@ const selectItem = (value: string) => {
   emit("select", value);
 };
 </script>
+
+<style scoped>
+/* Wrap onto a second line instead of truncating - the design shows the full
+   organisation and site names. */
+.switch-context__name {
+  white-space: normal;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  line-height: 1.25;
+}
+</style>

package/components/TableMain.vue

@@ -15,6 +15,24 @@
 -->
 <template>
   <v-row no-gutters>
+    <!--
+      THE DESIGN'S PAGE TITLE (Phase 9).
+
+      The design opens every screen with a 22px/800 heading. This shared table
+      card is mounted by 17 module screens, and none of them had one - four of
+      them (Units, Areas, Equipment Item, Equipment Management) were already
+      PASSING `:title` to this component, which had no `title` prop, so the
+      string was landing on the root element as a plain HTML `title` attribute:
+      a browser tooltip nobody asked for. It now draws the heading it was
+      always meant to draw.
+
+      Placement only. No caller changes, no slot moves, no behaviour: a screen
+      that passes no title renders exactly what it rendered before.
+    -->
+    <v-col cols="12" v-if="title">
+      <PageHeader :title="title" />
+    </v-col>
+
     <!-- Top Actions -->
     <v-col cols="12" class="mb-2" v-if="canCreate || $slots.actions">
       <v-row no-gutters>
@@ -62,43 +80,56 @@
 
     <!-- Table Card -->
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="flat"
-        class="table-card"
-        :loading="loading"
-      >
+      <!--
+        THE DESIGN'S CARD AND ITS IN-CARD TOP ROW (Phase 9).
+
+        Was a `v-card` + `v-toolbar`. `v-card` brings its own radius, elevation
+        and surface at a specificity a class has to fight, and `v-toolbar` puts
+        its `extension` on a SECOND stacked row. `AppCard` + `CardToolbar` are
+        the primitives the design is drawn with, already proven on
+        `ServiceProviderMain` / `MemberMain`.
+
+        Placement only. The refresh button, the `prepend-additional` slot, the
+        page range, the pager, the `extension` slot and the `footer` slot are
+        the same controls, emitting the same events, in the same order. The
+        `loading` bar `v-card` used to draw is drawn explicitly so a loading
+        screen still says so.
+      -->
+      <AppCard class="table-card">
+        <v-progress-linear
+          v-if="loading"
+          indeterminate
+          height="2"
+          class="table-card__loading"
+        />
+
         <!-- Toolbar -->
-        <v-toolbar
-          density="compact"
-          color="transparent"
-          class="table-card__toolbar"
-          :extension-height="extensionHeight"
-        >
-          <template #prepend>
+        <CardToolbar :count="pageRange">
+          <template #left>
             <v-btn fab icon density="comfortable" variant="text" @click="emits('refresh')">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
             <slot name="prepend-additional" />
           </template>
 
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 table-card__range">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="internalPage"
-                :length="pages"
-                @update:value="emits('update:page', internalPage)"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="internalPage"
+              :length="pages"
+              @update:value="emits('update:page', internalPage)"
+            />
           </template>
+        </CardToolbar>
 
-          <template v-if="$slots.extension" #extension>
-            <slot name="extension" />
-          </template>
-        </v-toolbar>
+        <!--
+          The callers' `extension` is a FILTER row (selects, date ranges), not
+          tabs - it is full-width by construction, so it keeps its own line
+          under the toolbar rather than being folded into it, which would push
+          the pager off the end of the row.
+        -->
+        <div v-if="$slots.extension" class="table-card__extension">
+          <slot name="extension" />
+        </div>
 
         <!-- Data Table -->
         <v-data-table
@@ -129,13 +160,18 @@
           </template>
         </v-data-table>
         <slot name="footer" />
-      </v-card>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
 
 <script lang="ts" setup>
 const props = defineProps({
+  // The design's page heading. Empty = no heading, i.e. exactly today's markup.
+  title: {
+    type: String,
+    default: "",
+  },
   headers: {
     type: Array as PropType<Array<Record<string, any>>>,
     required: true,

package/components/WorkOrder/Main.vue

@@ -1,58 +1,47 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters align="center" justify="space-between">
-        <v-btn
-          class="text-none text-capitalize"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="(showCreateDialog = true), (isEditMode = false)"
-          v-if="canCreateWorkOrder"
-        >
+  <div>
+    <!--
+      The design's page scaffold. The screen had no heading, its Create button
+      sat top-left and the search floated top-right outside the card, with
+      refresh and the pager stacked on their own bar above the table. Same
+      button, same dialog, same permission, same debounced search, same pager.
+    -->
+    <PageHeader title="Work Orders">
+      <template v-if="canCreateWorkOrder" #actions>
+        <AppButton @click="(showCreateDialog = true), (isEditMode = false)">
           Create Work Order
-        </v-btn>
-
-        <v-text-field
-          v-model="searchText"
-          placeholder="Search work order..."
-          variant="outlined"
-          density="comfortable"
-          clearable
-          hide-details
-          class="ml-2"
-          style="max-width: 250px"
-        />
-      </v-row>
-    </v-col>
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <v-row no-gutters>
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="updatePage(1)">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #left>
+            <AppButton
+              variant="icon"
+              icon="mdi-refresh"
+              aria-label="Refresh"
+              @click="updatePage(1)"
+            />
           </template>
 
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="updatePage"
-              />
-            </v-row>
+          <template #right>
+            <AppField
+              v-model="searchText"
+              search
+              compact
+              placeholder="Search work order..."
+              klass="app-toolbar__search"
+            />
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="updatePage"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
 
         <v-data-table
           :headers="headers"
@@ -62,6 +51,7 @@
           fixed-header
           hide-default-footer
           :hide-default-header="false"
+          :loading="loading"
           @click:row="tableRowClickHandler"
           style="max-height: calc(100vh - (200px))"
         >
@@ -69,9 +59,10 @@
             {{ formatDateDDMMYYYYLocal(item.createdAt) }}
           </template>
         </v-data-table>
-      </v-card>
+      </AppCard>
     </v-col>
-  </v-row>
+    </v-row>
+  </div>
 
   <WorkOrderCreate
     v-model="showCreateDialog"

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.92",
+  "version": "3.2.2-staging.94",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/utils/nav-sections.test.ts

@@ -28,16 +28,17 @@ const SECURITY = [
 ].map((title) => ({ title }));
 
 /**
- * THE RULE THAT MATTERS. A label is decoration; the menu is the product. If
- * this ever fails, someone has taught the sidebar to reorder itself.
+ * THE RULE THAT MATTERS. Grouping may reorder the rail; it may never change
+ * the menu. Same objects, same count - nothing added, hidden or duplicated.
  */
-test("the menu comes back in the order it went in, item for item", () => {
+test("every menu item comes back exactly once, and nothing else does", () => {
   const out = withSections(SECURITY);
 
   assert.equal(out.length, SECURITY.length);
-  out.forEach((entry, i) => {
-    assert.equal(entry.item, SECURITY[i], `position ${i}`);
-  });
+  assert.deepEqual(
+    new Set(out.map((e) => e.item)),
+    new Set(SECURITY)
+  );
 });
 
 test("Security is labelled the way the design draws it", () => {
@@ -102,10 +103,10 @@ test("an unmapped FIRST item prints no heading rather than a blank one", () => {
 
 /**
  * The applications do not agree on order: Landscape lists Feedbacks after its
- * equipment modules. The heading is printed again rather than left off, so no
- * item ever sits under a heading that is not its own.
+ * equipment modules. Those two Feedbacks/Work Orders items are collected under
+ * ONE SERVICE DESK heading instead of printing the heading twice.
  */
-test("a section that comes back later is labelled again, not orphaned", () => {
+test("a section that comes back later is grouped, not labelled twice", () => {
   const out = withSections([
     { title: "Feedbacks" },
     { title: "Equipment Items" },
@@ -113,8 +114,66 @@ test("a section that comes back later is labelled again, not orphaned", () => {
   ]);
 
   assert.deepEqual(
-    out.map((e) => e.section),
-    ["SERVICE DESK", "EQUIPMENT", "SERVICE DESK"]
+    out.map((e) => `${e.section}|${e.item.title}`),
+    [
+      "SERVICE DESK|Feedbacks",
+      "|Work Orders",
+      "EQUIPMENT|Equipment Items",
+    ]
+  );
+});
+
+/**
+ * Property Management is the screen that showed the defect: its own menu order
+ * printed SERVICE DESK, PROPERTY and SECURITY OPERATIONS twice each.
+ */
+test("Property Management prints each heading exactly once", () => {
+  const PM = [
+    "Dashboard",
+    "Service Providers",
+    "Feedbacks",
+    "Work Orders",
+    "Facility Mgmt",
+    "Pass & Key Mgmt",
+    "HID Face Reader",
+    "Online Forms",
+    "NFC Patrol",
+    "Bulletin Board",
+    "Bulletin Videos",
+    "Visitor Mgmt",
+    "Document Mgmt",
+    "Access Mgmt",
+  ].map((title) => ({ title }));
+
+  const out = withSections(PM);
+  const headings = out.map((e) => e.section).filter(Boolean);
+
+  assert.deepEqual(headings, [
+    "OVERVIEW",
+    "SERVICE DESK",
+    "PROPERTY",
+    "SECURITY OPERATIONS",
+    "COMMUNITY",
+  ]);
+  assert.equal(new Set(headings).size, headings.length);
+  assert.deepEqual(
+    out.map((e) => e.item.title),
+    [
+      "Dashboard",
+      "Service Providers",
+      "Feedbacks",
+      "Work Orders",
+      "Online Forms",
+      "Facility Mgmt",
+      "Pass & Key Mgmt",
+      "Visitor Mgmt",
+      "Document Mgmt",
+      "Access Mgmt",
+      "HID Face Reader",
+      "NFC Patrol",
+      "Bulletin Board",
+      "Bulletin Videos",
+    ]
   );
 });
 

package/utils/nav-sections.ts

@@ -1,29 +1,33 @@
 /**
- * THE GROUPED SIDEBAR - section labels, without touching the menu.
+ * THE GROUPED SIDEBAR - one heading per section, each printed once.
  *
  * The design draws the sidebar in labelled sections (OVERVIEW, SERVICE DESK,
  * PROPERTY, SECURITY OPERATIONS, COMMUNITY, WORKFORCE, ADMINISTRATION). Each
  * application builds its own menu array in its `layouts/default.vue`, gated
- * item by item on permissions, and that array is the product's navigation.
+ * item by item on permissions.
  *
- * So this file adds a LABEL and nothing else:
+ * The applications do not agree on the order they list their modules in
+ * (Property Management interleaves five sections; Landscape puts Feedbacks
+ * after Equipment). Walking that order and printing a heading whenever the
+ * section changed - what this file used to do - made Property Management draw
+ * SERVICE DESK, PROPERTY and SECURITY OPERATIONS TWICE each. It reads as a
+ * bug, so the items are now GROUPED:
  *
- *   - the order of the menu is the order the application gave us. Nothing is
- *     moved, sorted, merged, hidden or renamed. A label is inserted when the
- *     section CHANGES as we walk that existing order, which means the label is
- *     always true of the items under it.
- *   - a title this map has never heard of inherits the section above it, so a
- *     new menu item added by any of the eleven applications appears exactly
- *     where its author put it, under the heading it follows, rather than
- *     disappearing or forcing a stray heading.
- *   - the first item always gets its section printed, even if that section is
- *     "" (nothing) - a leading blank label is simply not rendered.
+ *   - every item is collected under its section, and each heading is printed
+ *     exactly once, in the order the design lists the sections (which is the
+ *     order they are declared in the map below).
+ *   - inside a section the application's own order is preserved, so items that
+ *     belong together stay in the sequence their author chose.
+ *   - a title this map has never heard of inherits the section of the item
+ *     above it, so a new menu item added by any of the eleven applications is
+ *     grouped with its neighbours rather than disappearing or forcing a stray
+ *     heading.
+ *   - an item with no section at all (an unmapped FIRST item) leads the rail
+ *     with no heading, exactly as before.
  *
- * A section may therefore appear twice in one sidebar. That is deliberate: the
- * applications do not all list their modules in the same order (Landscape puts
- * Feedbacks after Equipment; Property Management interleaves five sections),
- * and printing the heading again is honest, where suppressing it would leave a
- * run of items sitting under a heading that is not theirs.
+ * This changes what ORDER the items are drawn in and nothing else. No item is
+ * added, hidden, renamed, re-routed or re-gated - the array that comes out
+ * holds the same objects as the array that went in.
  */
 
 export const NAV_SECTIONS: Record<string, string> = {
@@ -110,19 +114,38 @@ export const NAV_SECTIONS: Record<string, string> = {
 
 export type TSectionedNavItem<T> = { item: T; section: string };
 
+/** The design's section order - the order they are declared above. */
+export const SECTION_ORDER: string[] = [
+  ...new Set(Object.values(NAV_SECTIONS)),
+];
+
 /**
- * Walks the menu IN THE ORDER GIVEN and tags each item with the section label
- * to print above it, or "" for no label. Same length, same order, same objects.
+ * Groups the menu by section and tags each item with the heading to print
+ * above it, or "" when the heading is already printed. Same length, same
+ * objects; only the order changes.
  */
 export function withSections<T extends { title?: string }>(
   items: T[]
 ): Array<TSectionedNavItem<T>> {
+  // An unmapped title inherits the section of the item above it.
   let current = "";
+  const resolved = items.map((item, index) => {
+    current = NAV_SECTIONS[String(item?.title ?? "")] ?? current;
+    return { item, section: current, index };
+  });
+
+  // Sectionless items (an unmapped first item) rank -1 and lead the rail.
+  // Inside a section the application's own order is kept.
+  const grouped = [...resolved].sort(
+    (a, b) =>
+      SECTION_ORDER.indexOf(a.section) - SECTION_ORDER.indexOf(b.section) ||
+      a.index - b.index
+  );
 
-  return items.map((item, index) => {
-    const section = NAV_SECTIONS[String(item?.title ?? "")] ?? current;
-    const changed = index === 0 || section !== current;
-    current = section;
-    return { item, section: changed ? section : "" };
+  let printed = "";
+  return grouped.map(({ item, section }) => {
+    const label = section === printed ? "" : section;
+    printed = section;
+    return { item, section: label };
   });
 }