@7365admin1/layer-common 3.2.2-staging.100 → 3.2.2-staging.102

package/components/AppField.vue

@@ -24,6 +24,7 @@
       :value="model"
       :placeholder="placeholder"
       :disabled="disabled"
+      :readonly="readonly"
       @input="model = ($event.target as HTMLInputElement).value"
     />
   </label>
@@ -41,6 +42,10 @@ defineProps({
   search: { type: Boolean, default: false },
   compact: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
+  /** A field that prints a derived value - a preview, a computed reference -
+      and is not typed into. Kept distinct from `disabled`, which also greys
+      the box and takes it out of the tab order. */
+  readonly: { type: Boolean, default: false },
   klass: { type: String, default: "" },
 });
 </script>

package/components/AreaChecklistHistoryLogs.vue

@@ -1,28 +1,27 @@
 <template>
   <v-row no-gutters align="center" justify="center">
     <v-col cols="12">
-      <v-card class="mx-auto">
-        <v-toolbar
-          density="compact"
-          color="grey-lighten-4"
-          class="d-flex align-center px-4 py-3"
-        >
-          <v-btn icon variant="plain" @click="back()" class="mr-2">
-            <v-icon>mdi-chevron-left</v-icon>
-          </v-btn>
-          <span class="text-h6 font-weight-bold">Area Checklist</span>
-        </v-toolbar>
-
-        <v-divider />
-
-        <v-card-text class="pa-0">
+      <!-- The screen's name and its Back move out of the `grey-lighten-4` bar -
+           a slab that stayed white in dark mode - onto the design's title row.
+           All five service apps mount this component bare, so the layer is the
+           only place the page name can come from. -->
+      <PageHeader title="Area Checklist">
+        <template #actions>
+          <AppButton variant="ghost" icon="mdi-chevron-left" @click="back()">
+            Back
+          </AppButton>
+        </template>
+      </PageHeader>
+
+      <AppCard>
+        <div class="pa-0">
           <v-row no-gutters>
             <v-col
               cols="12"
               md="6"
               lg="5"
               xl="4"
-              style="border-right: 1px solid rgba(0, 0, 0, 0.12)"
+              class="checklist-detail__split"
             >
               <v-row no-gutters class="pa-6">
                 <v-col cols="12" class="mb-4">
@@ -47,11 +46,11 @@
 
                     <v-col cols="12" class="mb-3">
                       <div class="text-body-2 mb-1">Status:</div>
-                      <v-chip
-                        class="text-capitalize text-body-2 font-weight-medium"
-                      >
-                        {{ status || "N/A" }}
-                      </v-chip>
+                      <StatusChip
+                        class="text-capitalize"
+                        :status="status"
+                        :label="status || 'N/A'"
+                      />
                     </v-col>
                   </v-row>
                 </v-col>
@@ -119,15 +118,15 @@
                         class="text-subtitle-2 font-weight-bold px-0"
                       >
                         Set {{ checklistSet.set }}
-                        <v-chip
+                        <StatusChip
                           v-if="checklistSet.isScheduleTask"
-                          size="x-small"
-                          color="info"
-                          variant="tonal"
-                          class="text-none ml-2"
+                          tone="info"
+                          :dot="false"
+                          pill
+                          class="ml-2"
                         >
                           Schedule Task
-                        </v-chip>
+                        </StatusChip>
                       </v-list-subheader>
 
                       <v-list-item
@@ -161,22 +160,14 @@
                             </div>
                           </v-col>
                           <v-col cols="12" sm="2" class="text-right">
-                            <v-chip
-                              :color="
-                                unit.status?.toLowerCase() === 'completed'
-                                  ? 'success'
-                                  : 'grey'
-                              "
-                              :variant="
-                                unit.status?.toLowerCase() === 'completed'
-                                  ? 'flat'
-                                  : 'outlined'
-                              "
-                              size="small"
+                            <!-- Same word decides the colour, only now through the
+                                 shared status map, so "Completed" here is the same
+                                 green as on every other screen. -->
+                            <StatusChip
                               class="text-capitalize"
-                            >
-                              {{ unit.status || "Open" }}
-                            </v-chip>
+                              :status="unit.status || 'Open'"
+                              :label="unit.status || 'Open'"
+                            />
                           </v-col>
                         </v-row>
                       </v-list-item>
@@ -191,8 +182,8 @@
               </v-row>
             </v-col>
           </v-row>
-        </v-card-text>
-      </v-card>
+        </div>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
@@ -242,3 +233,19 @@ const timeOut = ref<string>("N/A");
 const status = ref<string>("N/A");
 const signatureUrl = ref<string>("");
 </script>
+
+<style scoped>
+/* Was an inline `rgba(0,0,0,.12)`, which is the same near-black rule in dark
+   mode. The token follows the theme. At `md` and below the two halves stack, so
+   the rule moves under the first one. */
+.checklist-detail__split {
+  border-bottom: 1px solid var(--border);
+}
+
+@media (min-width: 960px) {
+  .checklist-detail__split {
+    border-bottom: none;
+    border-right: 1px solid var(--border);
+  }
+}
+</style>

package/components/SiteSettingsWorkOrder.vue

@@ -1,33 +1,53 @@
 <template>
-    <v-row no-gutters>
-        <v-expansion-panels multiple v-model="openPanels" >
-
-            <!-- Work Order Settings -->
-            <v-expansion-panel color="primary">
-                <v-expansion-panel-title>
-                    <v-icon class="mr-2">mdi-format-list-numbered</v-icon>
-                    Work Order Settings
-                </v-expansion-panel-title>
-
-                <v-expansion-panel-text>
-                    <v-text-field v-model="prefix" label="Prefix" :disabled="isLoading || !canManageSiteSettings"
-                        @input="handleInput" />
-
-                    <v-select v-model="noOfDigits" :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" label="No. of Digits"
-                        :disabled="isLoading || !canManageSiteSettings" />
-
-                    <v-text-field v-model="orderNumberPreview" label="Preview" readonly />
-
-                    <v-btn v-if="canManageSiteSettings" class="mt-2" :loading="isLoading" @click="save">
-                        Save
-                    </v-btn>
-                </v-expansion-panel-text>
-            </v-expansion-panel>
-
-        </v-expansion-panels>
-
-        <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
-    </v-row>
+    <div>
+        <!-- The page had no heading of its own: the five service apps mount this
+             component bare on `[org]/[site]/settings`, so the name only ever
+             appeared in the navigation rail. "Settings" is that rail's own label. -->
+        <PageHeader title="Settings" />
+
+        <v-row no-gutters>
+            <!--
+              `multiple` and which panel opens first are BEHAVIOUR, so they are
+              left exactly as they were - `.screen-accordion` only changes the
+              drawing, the same way `SiteSettings` already does it.
+            -->
+            <v-expansion-panels multiple v-model="openPanels" class="screen-accordion">
+
+                <!-- Work Order Settings -->
+                <v-expansion-panel>
+                    <v-expansion-panel-title>
+                        <v-icon class="mr-2">mdi-format-list-numbered</v-icon>
+                        Work Order Settings
+                    </v-expansion-panel-title>
+
+                    <v-expansion-panel-text>
+                        <div class="wo-settings__fields">
+                            <AppField v-model="prefix" label="Prefix"
+                                :disabled="isLoading || !canManageSiteSettings" @input="handleInput" />
+
+                            <!-- `return-object` keeps the emitted value a NUMBER, which is
+                                 what `createWorkOrderSettings` puts on the wire today. -->
+                            <AppSelect v-model="noOfDigits" return-object
+                                :items="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]" label="No. of Digits"
+                                :disabled="isLoading || !canManageSiteSettings" />
+
+                            <AppField :model-value="orderNumberPreview" label="Preview" readonly />
+                        </div>
+
+                        <!-- Still a `v-btn`: `AppButton` has no loading state, and the
+                             spinner on save is feedback, not decoration. -->
+                        <v-btn v-if="canManageSiteSettings" class="screen-btn-primary text-none mt-4"
+                            variant="flat" :loading="isLoading" @click="save">
+                            Save
+                        </v-btn>
+                    </v-expansion-panel-text>
+                </v-expansion-panel>
+
+            </v-expansion-panels>
+
+            <Snackbar v-model="toast.show" :text="toast.message" :color="toast.color" />
+        </v-row>
+    </div>
 </template>
 
 <script setup lang="ts">
@@ -173,4 +193,15 @@ function show(message: string, color: string) {
     toast.message = message
     toast.color = color
 }
-</script>
+</script>
+
+<style scoped>
+/* The design stacks a settings form's fields on one gap, rather than leaning on
+   each Vuetify field's own 22px of hint space. */
+.wo-settings__fields {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-width: 420px;
+}
+</style>

package/components/StockCard.vue

@@ -5,15 +5,18 @@
     color="page-background-color fill-height header-row"
   >
     <v-col cols="12" sm="12" md="11" lg="12" xl="12">
-      <v-row no-gutters class="mb-4">
-        <v-col cols="auto">
-          <v-btn variant="text" color="primary" class="text-none" @click="back">
-            <v-icon left>mdi-arrow-left</v-icon>
+      <!-- The loose Back link above the card becomes the design's title row -
+           the page name on the left, its action right-aligned on the same line.
+           `title` was already declared here and never drawn. -->
+      <PageHeader :title="title">
+        <template #actions>
+          <AppButton variant="ghost" icon="mdi-arrow-left" @click="back">
             Back
-          </v-btn>
-        </v-col>
-      </v-row>
-      <v-card class="pa-5 position-relative rounded-lg">
+          </AppButton>
+        </template>
+      </PageHeader>
+
+      <AppCard class="pa-5 position-relative">
         <!-- Stock Information -->
         <v-row class="pt-2">
           <v-col cols="12">
@@ -104,7 +107,7 @@
             </TableMain>
           </v-col>
         </v-row>
-      </v-card>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
@@ -181,9 +184,11 @@ watchEffect(() => {
 </script>
 
 <style scoped>
-.text-fontgray {
-  color: #7e7e7e;
-}
+/* The scoped `.text-fontgray { color: #7e7e7e }` that used to sit here is gone.
+   It out-specified the layer's tokenised rule in `assets/css/screens.css`, which
+   is why these four field labels were the estate's one measured 4.06:1 - the
+   same fixed grey in both themes. The surface under them is `AppCard`, which is
+   itself tokenised, so the ink can safely follow the theme. */
 
 :deep() .v-table .v-table__wrapper > table > thead > tr > th:not(:last-child) {
   border-right: thin solid rgba(var(--v-border-color), var(--v-border-opacity));

package/components/SubscriptionPlanTable.vue

@@ -1,80 +1,82 @@
 <template>
   <v-container fluid class="pa-6">
-    <!-- Header: Title & Create Button -->
-    <div class="d-flex align-center justify-space-between mb-6">
-      <h1 class="text-h5 font-weight-bold text-primary">
-        Subscription Plans
-      </h1>
-
-      <v-btn
-        color="secondary"
-        rounded="pill"
-        elevation="0"
-        @click="openCreateModal"
-      >
-        Create Plan
-      </v-btn>
-    </div>
+    <!--
+      THE DESIGN'S TITLE ROW. Was a hand-rolled flex row with a `text-h5`
+      heading and a pill button; it is the same title and the same button on
+      the same line, drawn by the shared `PageHeader` at 22px/800 so this
+      screen's heading matches every other screen's.
+    -->
+    <PageHeader title="Subscription Plans">
+      <template #actions>
+        <v-btn
+          class="text-none screen-btn-primary"
+          variant="flat"
+          @click="openCreateModal"
+        >
+          Create Plan
+        </v-btn>
+      </template>
+    </PageHeader>
 
     <!-- Search & Filters Bar -->
+    <!--
+      The primitives carry these exactly: the search is a string ref, and both
+      filters are string refs over `{ title, value }` options whose values are
+      already strings, so `AppSelect`'s native branch emits the same string
+      this screen has always stored ("all", "monthly", ...). No filter's
+      meaning, order or default changed.
+    -->
     <v-row class="mb-2" density="compact">
       <!-- Search Input -->
       <v-col cols="12" sm="4" md="3">
-        <v-text-field
-          v-model="search"
-          placeholder="Search Plan"
-          prepend-inner-icon="mdi-magnify"
-          variant="outlined"
-          density="compact"
-          hide-details
-          clearable
-        />
+        <AppField v-model="search" search placeholder="Search Plan" />
       </v-col>
 
       <!-- Filter by Category -->
       <v-col cols="12" sm="4" md="3">
-        <v-select
+        <AppSelect
           v-model="categoryFilter"
           :items="categoryOptions"
           label="Filter by category"
-          variant="outlined"
-          density="compact"
-          hide-details
         />
       </v-col>
 
       <!-- Filter by Billing Cycle -->
       <v-col cols="12" sm="4" md="3">
-        <v-select
+        <AppSelect
           v-model="billingFilter"
           :items="billingOptions"
           label="Filter by billing cycle"
-          variant="outlined"
-          density="compact"
-          hide-details
         />
       </v-col>
     </v-row>
 
     <!-- Main Table Card -->
-    <v-card variant="outlined" class="mt-4">
-      <!-- Status Tabs & Actions Bar -->
-      <div class="d-flex align-center justify-space-between bg-grey-lighten-4 border-b">
-        <v-tabs v-model="activeTab" color="primary" density="compact">
-          <v-tab value="active" class="text-none font-weight-bold">Active</v-tab>
-          <v-tab value="deactive" class="text-none font-weight-bold">Deactive</v-tab>
-        </v-tabs>
-
-        <div class="pa-2">
+    <AppCard class="table-card mt-4">
+      <!--
+        The tabs and the refresh were a hand-built `bg-grey-lighten-4` strip -
+        a hard-coded light grey that stayed light in the dark theme. They are
+        the card's own toolbar row now, which is where the design draws tabs,
+        and it follows the theme because it is tokenised.
+      -->
+      <CardToolbar>
+        <template #tabs>
+          <v-tabs v-model="activeTab" color="primary" density="compact">
+            <v-tab value="active" class="text-none font-weight-bold">Active</v-tab>
+            <v-tab value="deactive" class="text-none font-weight-bold">Deactive</v-tab>
+          </v-tabs>
+        </template>
+
+        <template #right>
           <v-btn
             icon="mdi-refresh"
             variant="text"
             density="comfortable"
-            title="Refresh"
+            aria-label="Refresh"
             @click="refresh"
           />
-        </div>
-      </div>
+        </template>
+      </CardToolbar>
 
       <!-- Table View -->
       <v-data-table
@@ -107,22 +109,21 @@
         </template>
 
         <!-- Applications Badge -->
+        <!-- A count, not a status word, so it takes the design's neutral tag
+             shape (no leading dot) rather than a colour it has not earned. -->
         <template #item.applicationIds="{ item }">
-          <v-chip size="small" variant="tonal" color="grey-darken-2">
+          <StatusChip tone="neutral" :dot="false">
             {{ item.applicationIds.length }} Application{{ item.applicationIds.length > 1 ? 's' : '' }}
-          </v-chip>
+          </StatusChip>
         </template>
 
         <!-- Status Badge -->
+        <!-- The shared word -> tone map: "Active" is `ok` (was Vuetify
+             `success`) and "Deactive" is unmapped, so it comes out neutral -
+             which is the grey it already was. Same two words, same two
+             meanings. -->
         <template #item.status="{ item }">
-          <v-chip
-            size="small"
-            :color="item.status === 'active' ? 'success' : 'grey'"
-            variant="flat"
-            class="text-caption font-weight-bold"
-          >
-            {{ item.status === 'active' ? 'Active' : 'Deactive' }}
-          </v-chip>
+          <StatusChip :status="item.status === 'active' ? 'Active' : 'Deactive'" />
         </template>
 
         <!-- Actions -->
@@ -166,13 +167,15 @@
         </template>
 
         <!-- Empty State -->
+        <!-- Same sentence, in the shared empty block the design draws it in. -->
         <template #no-data>
-          <div class="py-8 text-center text-grey-darken-1">
-            No plans found.
+          <div class="table-card__empty">
+            <v-icon icon="mdi-magnify-close" size="32" />
+            <span>No plans found.</span>
           </div>
         </template>
       </v-data-table>
-    </v-card>
+    </AppCard>
 
     <!-- Create / Edit Dialog -->
     <v-dialog v-model="showModal" max-width="600px" persistent>

package/components/TableListSecondary.vue

@@ -1,55 +1,46 @@
-<template>
-  <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-    <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
-      <template #prepend>
-        <slot name="title">Title</slot>
-      </template>
+<!--
+  THE SECOND LIST CARD - the one `ListView` and `WorkOrder/ListView` draw.
 
-      <template #append>
-        <v-row no-gutters justify="end" align="center">
-          <slot name="action-button"></slot>
-        </v-row>
-      </template>
+  Was a `v-card` with TWO `v-toolbar`s: the caller's title + action button on
+  the top one, and the page range + arrows on a second one under the table. The
+  design has neither. The page name and the screen's primary action belong on
+  ONE title row ABOVE the card (`PageHeader`), and the range and the pager
+  belong on the card's own single top row (`CardToolbar`) - which is exactly
+  the shape `TableMain` was converted to.
 
-      <template v-if="$slots.extension" v-slot:extension>
-        <slot name="extension"></slot>
-      </template>
-    </v-toolbar>
-
-    <v-data-table
-      v-model="selected"
-      :headers="props.headers"
-      :items="props.items"
-      item-value="_id"
-      items-per-page="20"
-      fixed-header
-      hide-default-footer
-      selec
-      :loading="props.loading"
-      @click:row="handleRowClick"
-      :style="`max-height:${props.height}`"
-      :class="{ 'clickable-rows': props.clickableRows }"
-    >
-      <template v-if="$slots.item" v-slot:item>
-        <slot name="item" :items="props.items"></slot>
+  VISUAL ONLY. Same headers, same items, same slots, same row click, same
+  `page` model, same `update:pagination` payloads, same increment/decrement
+  guards. Nothing is fetched, filtered, sorted or emitted differently; the two
+  toolbars became one row and moved, and that is the whole change.
+-->
+<template>
+  <div class="list-card">
+    <!--
+      The fold: the caller's `title` slot used to be the `v-toolbar`'s prepend,
+      i.e. a heading INSIDE the card, and its action button sat on the same
+      bar. Both are the design's page-title row, so they move up to it. Only
+      drawn when the caller actually supplies a title - a caller that passes
+      none used to get the literal fallback word "Title" on the bar, which is
+      not a heading anybody asked for.
+    -->
+    <PageHeader v-if="$slots.title">
+      <template #title>
+        <slot name="title" />
       </template>
 
-      <template v-slot:item="{ item }">
-        <tr @click="handleRowClick(item)">
-          <td v-for="col in props.headers" :key="col.value">
-            <slot :name="col.value" :item="item">
-              {{ item[col.value] }}
-            </slot>
-          </td>
-        </tr>
+      <template v-if="$slots['action-button']" #actions>
+        <slot name="action-button"></slot>
       </template>
-    </v-data-table>
-    <v-toolbar density="compact" class="px-3 border-t-sm" color="transparent">
-      <template #append>
-        <v-row no-gutters justify="end" align="center">
-          <span class="mr-2 text-caption text-fontgray">
-            {{ props.pageRange }}
-          </span>
+    </PageHeader>
+
+    <AppCard class="table-card">
+      <!--
+        ONE toolbar. The range keeps the exact string the caller computed and
+        the arrows keep their own disabled rules and emits; they have simply
+        stopped costing a second bar under the table.
+      -->
+      <CardToolbar :count="props.pageRange">
+        <template #right>
           <div class="arrow-navigation">
             <v-btn
               icon="mdi-chevron-left"
@@ -66,14 +57,48 @@
               @click="increment"
             />
           </div>
-        </v-row>
-      </template>
+        </template>
+      </CardToolbar>
 
-      <template v-if="$slots.extension" v-slot:extension>
+      <!--
+        `extension` used to be rendered by BOTH toolbars, i.e. the same content
+        twice, above and below the table. It is one row now, under the toolbar,
+        where `TableMain` puts a filter row.
+      -->
+      <div v-if="$slots.extension" class="table-card__extension">
         <slot name="extension"></slot>
-      </template>
-    </v-toolbar>
-  </v-card>
+      </div>
+
+      <v-data-table
+        v-model="selected"
+        :headers="props.headers"
+        :items="props.items"
+        item-value="_id"
+        items-per-page="20"
+        fixed-header
+        hide-default-footer
+        selec
+        :loading="props.loading"
+        @click:row="handleRowClick"
+        :style="`max-height:${props.height}`"
+        :class="{ 'clickable-rows': props.clickableRows }"
+      >
+        <template v-if="$slots.item" v-slot:item>
+          <slot name="item" :items="props.items"></slot>
+        </template>
+
+        <template v-slot:item="{ item }">
+          <tr @click="handleRowClick(item)">
+            <td v-for="col in props.headers" :key="col.value">
+              <slot :name="col.value" :item="item">
+                {{ item[col.value] }}
+              </slot>
+            </td>
+          </tr>
+        </template>
+      </v-data-table>
+    </AppCard>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -161,4 +186,20 @@ watch(selectAll, (curr) => {
 .clickable-rows tbody tr:hover {
   background-color: var(--hover);
 }
+
+/*
+  Every caller wraps its title in `<span class="text-h6 font-weight-regular">`,
+  because the old toolbar drew no type of its own. Vuetify's typography classes
+  are `!important`, so that span would keep 20px/400 inside the design's
+  22px/800 heading and the fold would look like it had not happened. The
+  heading owns the type now; the caller's span is left to carry whatever else
+  it says. Confined to this card's own page head, so no other `PageHeader` is
+  touched - and no app repo has to be edited for the title to land.
+*/
+.list-card :deep(.app-page-head__title) * {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+  letter-spacing: inherit !important;
+}
 </style>

package/package.json

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