@7365admin1/layer-common 3.2.2-staging.114 → 3.2.2-staging.116

package/assets/css/screens.css

@@ -312,6 +312,25 @@
   font-size: 19px;
 }
 
+/**
+ * A DIALOG'S OWN HEADER/FOOTER BAR - OPT-IN, DELIBERATELY.
+ *
+ * Some dialogs draw their title row and their Cancel/Submit row as a
+ * `v-toolbar`. Vuetify paints that from its own `surface`, which in dark mode
+ * is a visible grey slab sitting on the card. The obvious fix - one blanket
+ * `.v-overlay__content .v-toolbar` rule - was measured and REJECTED: sixty-odd
+ * dialog components draw such a bar, and several set `color="black"` or
+ * `color="grey-darken-3"` ON PURPOSE. A blanket rule would flatten those too,
+ * unrendered and unverified.
+ *
+ * So this is a class a converted dialog opts into. Background and text only -
+ * it moves no control and changes no button.
+ */
+.screen-dialog-bar.v-toolbar {
+  background: var(--card) !important;
+  color: var(--text) !important;
+}
+
 /**
  * The design's two buttons, for the dialogs and toolbars that draw their own.
  *

package/components/BuildingUnitFormEdit.vue

@@ -1,11 +1,11 @@
 <template>
   <v-card width="100%" :loading="getUnitPeoplePending || loading.ownerProcessing" :disabled="loading.ownerProcessing">
-    <v-toolbar>
+    <v-toolbar class="screen-dialog-bar">
       <v-row no-gutters class="fill-height px-6" align="center">
         <span class="font-weight-bold text-h5"> Unit Info ( {{ buildingUnit.name }} ) </span>
       </v-row>
     </v-toolbar>
-    <v-toolbar density="compact">
+    <v-toolbar class="screen-dialog-bar" density="compact">
       <v-tabs v-model="tab" class="mt-0" active-class="bg-success">
         <v-tab value="general">General</v-tab>
         <v-tab value="residents">Residents/Tenants</v-tab>
@@ -253,7 +253,7 @@
       </v-row>
     </v-col>
 
-    <v-toolbar class="pa-0" density="compact">
+    <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
       <v-row no-gutters>
         <v-col :cols="canUpdateUnit || canDeleteUnit ? 6 : 12" class="pa-0">
           <v-btn block variant="text" class="text-none" size="large" @click="emit('cancel')" height="48">

package/components/BulletinExpirationChip.vue

@@ -1,8 +1,17 @@
 <template>
-  <v-chip
-    size="small"
-    :color="value ? 'green' : 'red'"
-    :text="value ? 'Yes' : 'No'"
+  <!--
+    The design's status pill rather than a raw v-chip. Vuetify's `green` and
+    `red` are fixed hues that are in no token file: the red one printed
+    `rgb(244,67,54)` and measured 3.4:1 against the surface behind it, below AA
+    on the word people actually read, and the green one measured 2.78:1.
+    `approved` and `rejected` are the shared tone words, so this chip now takes
+    `--ok` / `--err` and their paired `--ok-bg` / `--err-bg` - the handoff's own
+    values - and carries its own background instead of borrowing whatever it
+    happens to sit on.
+  -->
+  <StatusChip
+    :status="value ? 'approved' : 'rejected'"
+    :label="value ? 'Yes' : 'No'"
   />
 </template>
 

package/components/DocumentManagement.vue

@@ -204,7 +204,7 @@
     <!-- Create Folder Dialog -->
     <v-dialog v-model="createFolderDialog" width="450" persistent>
       <v-card width="100%">
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters class="w-100">
             <v-col cols="12" class="pa-4">
               <span class="font-weight-medium text-h6">Create Folder</span>
@@ -234,7 +234,7 @@
           </v-form>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters class="w-100">
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -271,7 +271,7 @@
     <!-- Edit Folder Dialog -->
     <v-dialog v-model="editFolderDialog" width="450" persistent>
       <v-card width="100%" class="folder-dialog-card">
-        <v-toolbar class="pa-0 folder-dialog-toolbar" density="compact">
+        <v-toolbar class="pa-0 folder-dialog-toolbar screen-dialog-bar" density="compact">
           <v-row no-gutters class="w-100">
             <v-col cols="12" class="pa-4">
               <span class="font-weight-medium text-h6">Edit Folder</span>
@@ -306,7 +306,7 @@
           </v-form>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters class="w-100">
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -343,7 +343,7 @@
     <!-- Delete Folder Dialog -->
     <v-dialog v-model="deleteFolderDialog" width="450" persistent>
       <v-card width="100%" class="folder-dialog-card">
-        <v-toolbar density="compact" class="pl-4 folder-dialog-toolbar">
+        <v-toolbar density="compact" class="pl-4 folder-dialog-toolbar screen-dialog-bar">
           <span class="font-weight-medium text-h6">Delete Folder</span>
         </v-toolbar>
 
@@ -357,7 +357,7 @@
           </p>
         </v-card-text>
 
-        <v-toolbar density="compact" class="pa-0">
+        <v-toolbar density="compact" class="pa-0 screen-dialog-bar">
           <v-row no-gutters class="w-100">
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -485,7 +485,7 @@
             </v-col>
           </v-row>
         </v-card-text>
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters>
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -549,7 +549,7 @@
       persistent
     >
       <v-card width="100%">
-        <v-toolbar density="compact" class="pl-4">
+        <v-toolbar density="compact" class="pl-4 screen-dialog-bar">
           <span class="font-weight-medium text-h5">Delete Document</span>
         </v-toolbar>
         <v-card-text>
@@ -559,7 +559,7 @@
           </p>
         </v-card-text>
 
-        <v-toolbar density="compact">
+        <v-toolbar class="screen-dialog-bar" density="compact">
           <v-row no-gutters>
             <v-col cols="6">
               <v-btn

package/components/Nfc/NFCPatrolReportMain.vue

@@ -1,39 +1,46 @@
 <template>
-  <v-row no-gutters class="border-thin pa-6 rounded-lg">
+  <v-row no-gutters>
     <v-col cols="12">
-      <v-row no-gutters class="mb-4" align="center">
-        <v-col cols="12" md="6">
-          <v-btn
-            variant="text"
-            prepend-icon="mdi-chevron-left"
-            class="text-none"
-            @click="goBack"
-          >
+      <!--
+        The screen had no page name at all - it opened on a bare back button.
+        The design opens every screen with its name; the back link keeps its
+        own `router.back()` and moves onto that row as the ghost action.
+      -->
+      <PageHeader title="Patrol Report">
+        <template #actions>
+          <AppButton variant="ghost" icon="mdi-chevron-left" @click="goBack">
             Patrol Report Log
-          </v-btn>
-        </v-col>
-      </v-row>
-
-      <v-tabs
-        v-model="activeTab"
-        class="mb-6"
-        bg-color="transparent"
-        grow
-      >
-        <v-tab value="patrol" class="text-none border-thin">
-          Patrol Report
-        </v-tab>
-
-        <v-tab value="daily" class="text-none border-thin">
-          Daily Report
-        </v-tab>
-
-        <v-tab value="monthly" class="text-none border-thin">
-          Monthly Report
-        </v-tab>
-      </v-tabs>
-
-      <v-window v-model="activeTab" class="pt-4">
+          </AppButton>
+        </template>
+      </PageHeader>
+    </v-col>
+
+    <v-col cols="12">
+      <!--
+        The three report tabs were a `grow` `v-tabs` strip floating above the
+        content with its own `border-thin` boxes. The design makes the tabs the
+        card's own first row, so they become the ONE `CardToolbar`'s tabs. Same
+        `activeTab` model, same three values, same `v-window`.
+      -->
+      <AppCard>
+        <CardToolbar>
+          <template #tabs>
+            <button
+              v-for="tab in reportTabs"
+              :key="tab.value"
+              type="button"
+              role="tab"
+              class="app-tab"
+              :class="{ 'app-tab--active': activeTab === tab.value }"
+              :aria-selected="activeTab === tab.value"
+              @click="activeTab = tab.value"
+            >
+              {{ tab.label }}
+            </button>
+          </template>
+        </CardToolbar>
+
+      <v-window v-model="activeTab" class="pt-4 px-6 pb-6">
         <v-window-item value="patrol">
           <div v-if="activeTab === 'patrol'">
             <PatrolReportTab
@@ -73,6 +80,7 @@
           </div>
         </v-window-item>
       </v-window>
+      </AppCard>
     </v-col>
   </v-row>
 </template>
@@ -103,6 +111,12 @@ const router = useRouter();
 
 const activeTab = ref<NFCPatrolReportTab>("patrol");
 
+const reportTabs: Array<{ value: NFCPatrolReportTab; label: string }> = [
+  { value: "patrol", label: "Patrol Report" },
+  { value: "daily", label: "Daily Report" },
+  { value: "monthly", label: "Monthly Report" },
+];
+
 const { filters, options, fetchOptions } =
   useNFCPatrolReportFilters(props.site);
 

package/components/Nfc/NFCPatrolRouteForm.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card width="100%" max-width="800">
-    <v-toolbar color="white" elevation="0">
+    <v-toolbar class="screen-dialog-bar" elevation="0">
       <v-row no-gutters class="fill-height px-6" align="center">
         <span class="font-weight-bold text-h5">
           {{ title }}
@@ -15,8 +15,8 @@
         <v-row no-gutters>
           <!-- Route Name -->
           <v-col cols="12" class="mb-4">
-            <label class="text-caption text-grey-darken-1 mb-1 d-block">
-              Route Name <span class="text-red">*</span>
+            <label class="text-caption screen-hint mb-1 d-block">
+              Route Name <span class="text-error">*</span>
             </label>
             <v-text-field
               v-model="form.name"
@@ -30,8 +30,8 @@
 
           <!-- Checkpoints, Tolerance, Repeat Every -->
           <v-col cols="12" md="4" class="mb-4 pr-md-2">
-            <label class="text-caption text-grey-darken-1 mb-1 d-block">
-              Checkpoints <span class="text-red">*</span>
+            <label class="text-caption screen-hint mb-1 d-block">
+              Checkpoints <span class="text-error">*</span>
             </label>
             <v-select
               v-model="form.checkPointNumber"
@@ -44,8 +44,8 @@
           </v-col>
 
           <v-col cols="12" md="4" class="mb-4 px-md-1">
-            <label class="text-caption text-grey-darken-1 mb-1 d-block">
-              Tolerance (mins) <span class="text-red">*</span>
+            <label class="text-caption screen-hint mb-1 d-block">
+              Tolerance (mins) <span class="text-error">*</span>
             </label>
             <v-text-field
               v-model="form.tolerance"
@@ -57,8 +57,8 @@
           </v-col>
 
           <v-col cols="12" md="4" class="mb-4 pl-md-2">
-            <label class="text-caption text-grey-darken-1 mb-1 d-block">
-              Days <span class="text-red">*</span>
+            <label class="text-caption screen-hint mb-1 d-block">
+              Days <span class="text-error">*</span>
             </label>
             <v-select
               v-model="form.days"
@@ -76,7 +76,7 @@
             <v-card variant="outlined" class="pa-4" rounded="lg">
               <div class="d-flex align-center justify-space-between mb-3">
                 <span class="text-h6 font-weight-medium">Start Times</span>
-                <span class="text-body-2 text-grey-darken-1">Schedule</span>
+                <span class="text-body-2 screen-hint">Schedule</span>
               </div>
 
               <!-- Start Time Slots -->
@@ -96,7 +96,6 @@
                       prepend-inner-icon="mdi-clock-outline"
                       hide-details
                       type="time"
-                      bg-color="grey-lighten-4"
                       rounded="lg"
                       @update:model-value="syncEndTimeAt(index)"
                     />
@@ -116,7 +115,6 @@
                       prepend-inner-icon="mdi-clock-outline"
                       hide-details
                       type="time"
-                      bg-color="grey-lighten-2"
                       rounded="lg"
                       readonly
                     />
@@ -160,19 +158,19 @@
             <v-row no-gutters class="mb-2">
               <v-col
                 cols="2"
-                class="text-caption text-grey-darken-1 font-weight-medium"
+                class="text-caption screen-hint font-weight-medium"
               >
                 Checkpoints
               </v-col>
               <v-col
                 cols="6"
-                class="text-caption text-grey-darken-1 font-weight-medium pl-4"
+                class="text-caption screen-hint font-weight-medium pl-4"
               >
                 NFC Tag
               </v-col>
               <v-col
                 cols="4"
-                class="text-caption text-grey-darken-1 font-weight-medium text-right"
+                class="text-caption screen-hint font-weight-medium text-right"
               >
                 Travel time
               </v-col>
@@ -218,15 +216,15 @@
           <!-- Summary -->
           <v-col cols="12">
             <v-row no-gutters class="mb-2">
-              <v-col cols="6" class="text-body-2 text-grey-darken-1">
+              <v-col cols="6" class="text-body-2 screen-hint">
                 Tolerance Balance:
-                <span class="font-weight-bold text-grey-darken-3"
+                <span class="font-weight-bold"
                   >{{ toleranceBalance }} min</span
                 >
               </v-col>
-              <v-col cols="6" class="text-body-2 text-grey-darken-1 text-right">
+              <v-col cols="6" class="text-body-2 screen-hint text-right">
                 Total Travel Time:
-                <span class="font-weight-bold text-grey-darken-3"
+                <span class="font-weight-bold"
                   >{{ totalTravelTime }} min</span
                 >
               </v-col>
@@ -238,7 +236,7 @@
 
     <v-divider />
 
-    <v-toolbar class="pa-0" density="compact" color="white" elevation="0">
+    <v-toolbar class="pa-0 screen-dialog-bar" density="compact" elevation="0">
       <v-row no-gutters>
         <v-col cols="6" class="pa-0">
           <v-btn

package/components/Nfc/NFCPatrolSettings.vue

@@ -1,7 +1,12 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
+      <!--
+        `AppCard` for the outlined card. This mounts inside PM `settings.vue`'s
+        "NFC Patrol Settings" expansion panel, which already draws that
+        heading - so NO `PageHeader`, or the panel would name itself twice.
+      -->
+      <AppCard>
         <v-row no-gutters class="pa-6" align="center">
           <v-col cols="12" md="7" class="pr-md-8">
             <div class="text-subtitle-1 font-weight-medium">
@@ -36,10 +41,15 @@
 
         <v-row no-gutters class="pa-6 pt-0">
           <v-col cols="12" class="d-flex justify-end">
+            <!--
+              Stays a `v-btn`: `AppButton` has no `loading`, and dropping the
+              spinner would lose the only signal this save is in flight. The
+              design's fill comes from `.screen-btn-primary` instead of
+              Vuetify's `color="primary"` - same click, same `loading` gate.
+            -->
             <v-btn
               text="Save"
-              color="primary"
-              class="text-none"
+              class="screen-btn-primary"
               size="large"
               variant="flat"
               @click="submit"
@@ -47,7 +57,7 @@
             />
           </v-col>
         </v-row>
-      </v-card>
+      </AppCard>
     </v-col>
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-row>

package/components/Nfc/NFCTagForm.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card width="100%">
-    <v-toolbar>
+    <v-toolbar class="screen-dialog-bar">
       <v-row no-gutters class="fill-height px-6" align="center">
         <span class="font-weight-bold text-h5 text-capitalize">
           {{ title }}
@@ -16,7 +16,7 @@
         <v-row no-gutters>
           <v-col cols="12" class="mb-4">
             <label class="text-subtitle-2 font-weight-medium mb-2">
-              Name <span class="text-red">*</span>
+              Name <span class="text-error">*</span>
             </label>
             <v-text-field
               v-model="form.name"
@@ -30,7 +30,7 @@
 
           <v-col cols="12" class="mb-4">
             <label class="text-subtitle-2 font-weight-medium mb-2">
-              Tag ID <span class="text-red">*</span>
+              Tag ID <span class="text-error">*</span>
             </label>
             <v-text-field
               v-model="form.tagID"
@@ -47,7 +47,7 @@
       </v-form>
     </v-card-text>
 
-    <v-toolbar class="pa-0" density="compact">
+    <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
       <v-row no-gutters>
         <v-col cols="6" class="pa-0">
           <v-btn

package/components/Nfc/NFCTagMain.vue

@@ -1,53 +1,51 @@
 <template>
   <v-row no-gutters>
     <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-        <v-toolbar density="compact" color="grey-lighten-4 pl-2 pr-4">
-          <template #prepend>
+      <!--
+        Two `grey-lighten-4` `v-toolbar`s - one above the table for refresh and
+        Add, one below it for the page range and the pager - become the ONE
+        `CardToolbar` the design draws. The range is the toolbar's own count
+        rather than a `text-font gray` caption; the pager keeps its model and
+        its `@update:value` emit, and Add keeps opening the same dialog.
+
+        This component mounts inside PM `settings.vue`'s "NFC Management"
+        expansion panel, which already draws that heading - so NO `PageHeader`
+        here, or the panel would read its name twice.
+      -->
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #left>
             <v-btn fab icon density="comfortable" @click="getNFCTagRefresh()">
               <v-icon>mdi-refresh</v-icon>
             </v-btn>
           </template>
 
-          <template #append>
-            <v-btn
-              variant="flat"
-              color="primary"
-              class="text-none"
-              @click="dialogAdd = true"
-            >
-              Add
-            </v-btn>
+          <template #right>
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="$emit('update:value', $event)"
+            />
+            <AppButton @click="dialogAdd = true">Add</AppButton>
           </template>
-        </v-toolbar>
-
-        <v-card-text class="pa-0">
-          <v-data-table
-            :headers="headers"
-            :items="items"
-            fixed-header
-            hide-default-footer
-            @click:row="handleRowClick"
-            style="max-height: 300px"
-          >
-          </v-data-table>
-        </v-card-text>
-
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #append>
-            <v-row no-gutters justify="end" align="center">
-              <span class="mr-2 text-caption text-font gray">
-                {{ pageRange }}
-              </span>
-              <local-pagination
-                v-model="page"
-                :length="pages"
-                @update:value="$emit('update:value', $event)"
-              />
-            </v-row>
+        </CardToolbar>
+
+        <v-data-table
+          :headers="headers"
+          :items="items"
+          fixed-header
+          hide-default-footer
+          @click:row="handleRowClick"
+          style="max-height: 300px"
+        >
+          <!-- The status column printed the raw word as plain text. `StatusChip`
+               prints the SAME word - it is given the item's own value - and
+               only adds the design's tone from the shared map. -->
+          <template #item.status="{ item }">
+            <StatusChip :status="(item as any).status" />
           </template>
-        </v-toolbar>
-      </v-card>
+        </v-data-table>
+      </AppCard>
     </v-col>
 
     <!-- Add Dialog -->
@@ -79,7 +77,7 @@
     <!-- Preview Dialog -->
     <v-dialog v-model="dialogPreview" persistent width="540">
       <v-card width="100%">
-        <v-toolbar>
+        <v-toolbar class="screen-dialog-bar">
           <v-row no-gutters class="fill-height px-6" align="center">
             <span class="font-weight-bold text-h5 text-capitalize">
               NFC Tag Details
@@ -110,7 +108,7 @@
           </v-row>
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters>
             <v-col cols="6" class="pa-0">
               <v-btn
@@ -171,7 +169,7 @@
           Are you sure you want to delete this NFC Tag?
         </v-card-text>
 
-        <v-toolbar class="pa-0" density="compact">
+        <v-toolbar class="pa-0 screen-dialog-bar" density="compact">
           <v-row no-gutters>
             <v-col cols="6" class="pa-0">
               <v-btn

package/components/Nfc/PatrolReport/ReportFilters.vue

@@ -11,7 +11,6 @@
         density="comfortable"
         rounded="lg"
         hide-details
-        bg-color="white"
         @update:model-value="updateFilter('route', $event)"
       />
     </v-col>
@@ -30,7 +29,6 @@
         density="comfortable"
         rounded="lg"
         hide-details
-        bg-color="white"
         @update:model-value="updateFilter('timeRange', $event)"
       />
     </v-col>
@@ -47,7 +45,6 @@
         density="comfortable"
         rounded="lg"
         hide-details
-        bg-color="white"
         @update:model-value="updateFilter('date', $event)"
       />
     </v-col>

package/package.json

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