@7365admin1/layer-common 3.2.7 → 3.2.8-staging.200

package/components/Nfc/NFCPatrolRouteMain.vue

@@ -1,88 +1,80 @@
 <template>
   <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
-            rounded="pill"
-            variant="outlined"
-  
-            size="large"
-            class="text-none px-8"
+      <!-- Title row; nav calls this screen "Routes". The Add pill moves onto it
+           and the search onto the card's toolbar, where the design draws them. -->
+      <PageHeader title="Routes">
+        <template #actions>
+          <AppButton
+            v-if="props.canCreateNfcPatrol"
+            icon="mdi-plus"
             @click="dialogAdd = true"
           >
             Add Route
-          </v-btn>
-        </v-col>
-        <v-col cols="12" md="6" class="d-flex justify-end">
-          <v-text-field
+          </AppButton>
+        </template>
+      </PageHeader>
+
+      <!--
+        Was `v-card` + `v-data-table` + a `grey-lighten-4` `v-toolbar` BELOW the
+        table holding the page range and pager (a white slab that stayed white in
+        dark mode). `TableMain` draws the same card with that row on top, which
+        is where the design puts it. Same headers, items, page size, row click
+        and item slots; the refresh button is wired to the refresh this screen
+        already calls after add/edit.
+      -->
+      <TableMain
+        :headers="headers"
+        :items="items"
+        :page="page"
+        :pages="pages"
+        :pageRange="pageRange"
+        show-header
+        @refresh="getRoutesRefresh()"
+        @update:page="page = $event"
+        @row-click="(data: any) => handleRowClick(null, data)"
+      >
+        <template #prepend-additional>
+          <AppField
             v-model="searchInput"
-            density="comfortable"
+            search
+            compact
             placeholder="Search"
-            clearable
-            append-inner-icon="mdi-magnify"
-            hide-details
-            variant="outlined"
-            rounded="lg"
-            style="max-width: 400px"
-            bg-color="white"
+            klass="app-toolbar__search"
           />
-        </v-col>
-      </v-row>
-
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-
-        <v-card-text class="pa-0">
-          <v-data-table
-            :headers="headers"
-            :items="items"
-            :items-per-page="20"
-            fixed-header
-            hide-default-footer
-            @click:row="handleRowClick"
-            style="max-height: calc(100vh - 300px)"
-            class="nfc-route-table"
-            hover
-          >
-            <template #item.numberOfCheckpoints="{ value }">
-              <div class="text-center">{{ value || "--" }}</div>
-            </template>
-
-            <template #item.tolerance="{ item }">
-              <div class="text-center">
-                <div>{{ item.tolerance ? `${item.tolerance} mins` : "--" }}</div>
-                <div class="text-grey">{{ item.totalTravelTime ? `${item.totalTravelTime} mins` : "--" }}</div>
-              </div>
-            </template>
-
-            <template #item.schedules="{ value }">
-              <span v-if="Array.isArray(value) && value.length > 0">
-                {{ value.map(s => `${s.start}-${s.end}`).join(", ") }}
-              </span>
-              <span v-else>--</span>
-            </template>
-
-            <template #item.repeatDays="{ value }">
-              <span>{{ value || "--" }} </span>
-            </template>
-          </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-fontgray">
-                {{ pageRange }}
-              </span>
-              <local-pagination v-model="page" :length="pages" />
-            </v-row>
-          </template>
-        </v-toolbar>
-      </v-card>
+        </template>
+
+        <template #item.numberOfCheckpoints="{ value }">
+          <div class="text-center">{{ value || "--" }}</div>
+        </template>
+
+        <template #item.tolerance="{ item }">
+          <div class="text-center">
+            <div>{{ item.tolerance ? `${item.tolerance} mins` : "--" }}</div>
+            <div class="text-grey">{{ item.totalTravelTime ? `${item.totalTravelTime} mins` : "--" }}</div>
+          </div>
+        </template>
+
+        <template #item.schedules="{ value }">
+          <span v-if="Array.isArray(value) && value.length > 0">
+            {{ value.map((s: any) => `${s.start}-${s.end}`).join(", ") }}
+          </span>
+          <span v-else>--</span>
+        </template>
+
+        <template #item.repeatDays="{ value }">
+          <span>{{ value || "--" }} </span>
+        </template>
+      </TableMain>
     </v-col>
 
     <!-- Add Dialog -->
-    <v-dialog v-model="dialogAdd" persistent max-width="900">
+    <v-dialog
+      v-if="props.canCreateNfcPatrol"
+      v-model="dialogAdd"
+      persistent
+      max-width="900"
+    >
       <NFCPatrolRouteForm
         title="Add Route"
         :site="props.site"
@@ -94,7 +86,12 @@
     </v-dialog>
 
     <!-- Edit Dialog -->
-    <v-dialog v-model="dialogEdit" persistent max-width="900">
+    <v-dialog
+      v-if="props.canUpdateNfcPatrol"
+      v-model="dialogEdit"
+      persistent
+      max-width="900"
+    >
       <NFCPatrolRouteForm
         title="Edit Route"
         :site="props.site"
@@ -190,7 +187,10 @@
 
         <v-toolbar class="pa-0" density="compact">
           <v-row no-gutters>
-            <v-col cols="6" class="pa-0">
+            <v-col
+              :cols="props.canUpdateNfcPatrol || props.canDeleteNfcPatrol ? 6 : 12"
+              class="pa-0"
+            >
               <v-btn
                 block
                 variant="text"
@@ -203,7 +203,11 @@
               </v-btn>
             </v-col>
 
-            <v-col cols="6" class="pa-0">
+            <v-col
+              v-if="props.canUpdateNfcPatrol || props.canDeleteNfcPatrol"
+              cols="6"
+              class="pa-0"
+            >
               <v-menu>
                 <template #activator="{ props }">
                   <v-btn
@@ -220,13 +224,17 @@
                 </template>
 
                 <v-list class="pa-0">
-                  <v-list-item @click="openDialogEdit()">
+                  <v-list-item v-if="props.canUpdateNfcPatrol" @click="openDialogEdit()">
                     <v-list-item-title class="text-subtitle-2">
                       Edit Route
                     </v-list-item-title>
                   </v-list-item>
 
-                  <v-list-item @click="openDialogDelete()" class="text-red">
+                  <v-list-item
+                    v-if="props.canDeleteNfcPatrol"
+                    @click="openDialogDelete()"
+                    class="text-red"
+                  >
                     <v-list-item-title class="text-subtitle-2">
                       Delete Route
                     </v-list-item-title>
@@ -240,7 +248,12 @@
     </v-dialog>
 
     <!-- Delete Dialog -->
-    <v-dialog v-model="dialogDelete" persistent width="540">
+    <v-dialog
+      v-if="props.canDeleteNfcPatrol"
+      v-model="dialogDelete"
+      persistent
+      width="540"
+    >
       <v-card width="100%">
         <v-card-text
           style="max-height: 100vh; overflow-y: auto"
@@ -304,6 +317,18 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  canCreateNfcPatrol: {
+    type: Boolean,
+    default: false,
+  },
+  canUpdateNfcPatrol: {
+    type: Boolean,
+    default: false,
+  },
+  canDeleteNfcPatrol: {
+    type: Boolean,
+    default: false,
+  },
   headers: {
     type: Array as PropType<Array<any>>,
     default: () => [
@@ -406,6 +431,8 @@ const messageSnackbar = ref(false);
 const messageColor = ref("");
 
 async function openDialogEdit() {
+  if (!props.canUpdateNfcPatrol) return;
+
   try {
     // Fetch the full route details from the API
     const response = await getRouteById(selectedRoute.value._id);
@@ -431,6 +458,8 @@ async function openDialogEdit() {
 }
 
 function openDialogDelete() {
+  if (!props.canDeleteNfcPatrol) return;
+
   dialogDelete.value = true;
 
   if (dialogPreview.value) dialogPreview.value = false;
@@ -502,6 +531,8 @@ function handleRowClick(_: any, data: any) {
 }
 
 async function submitDelete() {
+  if (!props.canDeleteNfcPatrol) return;
+
   try {
     await deleteRouteById(selectedRoute.value._id ?? "");
     await getRoutesRefresh();
@@ -513,27 +544,9 @@ async function submitDelete() {
   }
 }
 </script>
-
-<style scoped>
-.nfc-route-table :deep(.v-data-table__th) {
-  background-color: rgb(250, 250, 250);
-  font-weight: 500;
-  white-space: pre-line;
-  padding: 16px 12px !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.nfc-route-table :deep(.v-data-table__td) {
-  padding: 16px 12px !important;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.nfc-route-table :deep(tbody tr:hover) {
-  background-color: rgba(0, 0, 0, 0.02) !important;
-  cursor: pointer;
-}
-
-.nfc-route-table :deep(.v-data-table__tr) {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-</style>
+<!--
+  The screen's own table CSS is gone with the `v-data-table` it styled: it
+  hardcoded an `rgb(250,250,250)` header fill and black-alpha borders, which
+  stay light in dark mode. `TableMain` draws the design's header row and
+  borders from the theme tokens instead.
+-->

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,8 +1,8 @@
 <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">
+        <span class="screen-card-title text-capitalize">
           {{ title }}
         </span>
       </v-row>
@@ -15,8 +15,8 @@
       <v-form ref="formRef" v-model="valid" @submit.prevent="submit">
         <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>
+            <label class="nfc-tag__label mb-2">
+              Name <span class="text-error">*</span>
             </label>
             <v-text-field
               v-model="form.name"
@@ -29,8 +29,8 @@
           </v-col>
 
           <v-col cols="12" class="mb-4">
-            <label class="text-subtitle-2 font-weight-medium mb-2">
-              Tag ID <span class="text-red">*</span>
+            <label class="nfc-tag__label mb-2">
+              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
@@ -64,6 +64,10 @@
         </v-col>
 
         <v-col cols="6" class="pa-0">
+          <!-- Was `color="black"`: a fixed slab that stayed black on the dark
+               card. `primary-button` is the theme's FILL token, and its pair
+               `on-primary-button` supplies the white label - unlike `primary`,
+               which is a FOREGROUND here (links, icons, text buttons). -->
           <v-btn
             block
             tile
@@ -71,7 +75,7 @@
             class="text-none"
             size="large"
             height="48"
-            color="black"
+            color="primary-button"
             @click="submit"
             :loading="loading"
             :disabled="!valid || loading || !hasChanges"
@@ -234,3 +238,13 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+/* Was `text-subtitle-2`, Vuetify's 14px. The required asterisk beside it
+   keeps `text-error`; only the label's size and ink move. */
+.nfc-tag__label {
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--text);
+}
+</style>

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/DailyReportTab.vue

@@ -17,6 +17,13 @@
     </template>
 
 
+    <!-- A failed request is not an empty result. Saying "no patrol log found"
+         for a 500 states something about the data the server never said. -->
+    <ReportEmptyState
+      v-else-if="!loading && failed"
+      title="Report unavailable"
+      message="The patrol logs could not be loaded. Please try again."
+    />
     <ReportEmptyState
       v-else-if="!loading && notFound"
       title="No Daily Report"
@@ -51,7 +58,7 @@ defineEmits<{
   export: [type: "pdf" | "csv"];
 }>();
 
-const { report, loading, notFound, fetchReport } = useNFCPatrolDailyReport(
+const { report, loading, notFound, failed, fetchReport } = useNFCPatrolDailyReport(
   props.filters,
   props.site,
 );

package/components/Nfc/PatrolReport/MonthlyReportTab.vue

@@ -21,6 +21,13 @@
       />
     </template>
 
+    <!-- A failed request is not an empty result. Saying "no patrol log found"
+         for a 500 states something about the data the server never said. -->
+    <ReportEmptyState
+      v-else-if="!loading && failed"
+      title="Report unavailable"
+      message="The patrol logs could not be loaded. Please try again."
+    />
     <ReportEmptyState
       v-else-if="!loading"
       title="No Monthly Report"
@@ -55,7 +62,7 @@ defineEmits<{
   export: [type: "pdf" | "csv"];
 }>();
 
-const { report, loading, notFound, fetchReport } =
+const { report, loading, notFound, failed, fetchReport } =
   useNFCPatrolMonthlyReport(props.filters, props.site);
 
 watch(

package/components/Nfc/PatrolReport/MonthlyReportTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mt-6">
-    <div class="text-h6 font-weight-bold mb-4">
+    <div class="screen-card-title mb-4">
       {{ title }}
     </div>
 
@@ -26,8 +26,10 @@
             {{ row.checked }}
           </td>
 
+          <!-- A month with no checkpoint due has no rate. "0%" there reads as
+               total failure, so it says nothing instead. -->
           <td class="text-center">
-            {{ row.checkedPercentage }}%
+            {{ row.checkedPercentage === null ? "—" : `${row.checkedPercentage}%` }}
           </td>
 
           <td class="text-center">
@@ -35,7 +37,7 @@
           </td>
 
           <td class="text-center">
-            {{ row.missedPercentage }}%
+            {{ row.missedPercentage === null ? "—" : `${row.missedPercentage}%` }}
           </td>
         </tr>
       </tbody>

package/components/Nfc/PatrolReport/PatrolActivityTable.vue

@@ -1,9 +1,24 @@
+<!--
+  The checkpoint-by-checkpoint rows of a patrol report.
+
+  Same change as the two tables beside it: off `variant="flat"` (no border on
+  either theme) and `border-thin` (a hairline the theme does not own) onto
+  `.table-card`, which is the design's table surface and styles the raw
+  `v-table`'s header row and cells.
+
+  `statusColor()` keeps returning `success`/`error`: those are the design
+  tokens by way of `utils/theme.ts`, and `utils/status.ts` does not name
+  "Skipped", so routing this through `StatusChip` would turn a red skipped
+  checkpoint neutral. That is a design decision, not a conversion.
+-->
 <template>
-  <v-card variant="flat" rounded="lg">
-    <v-card-title>Patrol Activity</v-card-title>
+  <div class="table-card table-card__shrink">
+    <div class="activity-table__head">
+      <span class="screen-card-title">Patrol Activity</span>
+    </div>
 
-    <v-card-text class="pa-0">
-      <v-table class="border-thin">
+    <div>
+      <v-table>
         <thead>
           <tr>
             <th>Checkpoints</th>
@@ -58,8 +73,8 @@
           </tr>
         </tbody>
       </v-table>
-    </v-card-text>
-  </v-card>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -90,6 +105,11 @@ function handleActivityClick(activity: NFCPatrolActivity) {
 </script>
 
 <style scoped>
+.activity-table__head {
+  padding: 14px var(--cellpad-x);
+  border-bottom: 1px solid var(--border);
+}
+
 .cursor-pointer {
   cursor: pointer;
 }