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

package/components/Nfc/PatrolReport/PatrolReportTab.vue

@@ -22,6 +22,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 Patrol Log"
@@ -63,6 +70,7 @@ const {
   report,
   loading,
   notFound,
+  failed,
   selectedActivityRemarks,
   dialogRemarks,
   fetchReport,

package/components/Nfc/PatrolReport/PatrolRouteSummary.vue

@@ -1,14 +1,28 @@
+<!--
+  The schedule-vs-actual pair at the top of a patrol report.
+
+  Was `variant="flat"` - a Vuetify surface with no border on either theme - and
+  the table inside it was `border-thin`, i.e. a hairline the theme does not
+  own. `.table-card` is the design's table surface: `--card` on `--border` at
+  `--r-card`, and it styles the `thead`/`tbody` of a raw `v-table` for us, so
+  the header row picks up the design's uppercase 11px/800 and the rows the
+  49px line box.
+
+  `text-body-2 text-medium-emphasis` on the tolerance was Vuetify's Roboto
+  scale plus an opacity; `--text2` is the design's secondary ink and measures
+  9.62:1 on a card.
+-->
 <template>
-  <v-card class="mb-6" variant="flat" rounded="lg">
-    <v-card-title class="d-flex justify-space-between align-center">
-      <span>Patrol Route Summary: {{ summary.routeName }}</span>
-      <span class="text-body-2 text-medium-emphasis">
+  <div class="table-card table-card__shrink mb-6">
+    <div class="route-summary__head">
+      <span class="screen-card-title">Patrol Route Summary: {{ summary.routeName }}</span>
+      <span class="route-summary__tolerance">
         Tolerance: {{ summary.tolerance }} mins
       </span>
-    </v-card-title>
+    </div>
 
-    <v-card-text class="pa-0">
-      <v-table class="border-thin">
+    <div>
+      <v-table>
         <thead>
           <tr>
             <th>Time</th>
@@ -50,8 +64,8 @@
           </tr>
         </tbody>
       </v-table>
-    </v-card-text>
-  </v-card>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -61,3 +75,21 @@ defineProps<{
   summary: NFCPatrolRouteSummary;
 }>();
 </script>
+
+<style scoped>
+.route-summary__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px var(--cellpad-x);
+  border-bottom: 1px solid var(--border);
+}
+
+.route-summary__tolerance {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text2);
+  white-space: nowrap;
+}
+</style>

package/components/Nfc/PatrolReport/RemarksDialog.vue

@@ -1,22 +1,39 @@
+<!--
+  The remarks a guard left when skipping a checkpoint.
+
+  Was a bare `v-card rounded="xl"` - a 24px corner where the design's modal is
+  16px (`--r-modal`) - with a `text-h6` heading and Vuetify's default elevation
+  rather than `--shadow-modal`. `.screen-modal` is all three, and it styles its
+  own `.v-card-title`, so the `text-h6` span becomes the title element the
+  design already draws.
+
+  The close control was a tinted `variant="text"` icon button; `.screen-icon-btn`
+  is the design's bordered square, the same one every other dialog uses.
+-->
 <template>
   <v-dialog :model-value="modelValue" max-width="600" persistent>
-    <v-card rounded="xl">
-      <v-card-title class="d-flex align-center pa-6">
-        <span class="text-h6">Skip Checkpoint Remarks</span>
-        <v-spacer />
-        <v-btn icon="mdi-close" variant="text" size="small" @click="close" />
-      </v-card-title>
+    <v-card class="screen-modal">
+      <div class="remarks-dialog__head">
+        <v-card-title class="pa-0">Skip Checkpoint Remarks</v-card-title>
+        <v-btn
+          class="screen-icon-btn"
+          icon="mdi-close"
+          variant="flat"
+          aria-label="Close"
+          @click="close"
+        />
+      </div>
 
-      <v-card-text class="px-6 pb-6">
+      <div class="screen-modal__body px-6 pb-6">
         <v-textarea
+          class="filter-field"
           :model-value="remarks"
           variant="outlined"
-          rounded="lg"
           readonly
           rows="4"
           hide-details
         />
-      </v-card-text>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -35,3 +52,16 @@ function close() {
   emit("update:modelValue", false);
 }
 </script>
+
+<style scoped>
+/* The title row was a `v-card-title` with a `v-spacer` inside it. A flex row
+   with the title and the close button as its two children says the same thing
+   and lets `.screen-modal .v-card-title` reach the heading. */
+.remarks-dialog__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 20px 24px;
+}
+</style>

package/components/Nfc/PatrolReport/ReportEmptyState.vue

@@ -1,13 +1,21 @@
+<!--
+  The patrol report's "nothing selected yet" state.
+
+  It was a bordered `v-card` with a `text-h6` heading, a `text-body-2
+  text-medium-emphasis` line and `color="grey-lighten-1"` on the icon - a fixed
+  Vuetify grey, i.e. the same light grey on the dark page.
+
+  The design already has this exact object: `.screen-empty` is the centred
+  column with the muted icon and the muted sentence, and it colours its own
+  `.v-icon`. So the card and the three type classes go and the design's one
+  class replaces them.
+-->
 <template>
-  <v-card class="text-center pa-12" variant="outlined" rounded="lg">
-    <v-icon size="64" color="grey-lighten-1" class="mb-4">
-      mdi-clipboard-text-outline
-    </v-icon>
-    <h3 class="text-h6 mb-2">{{ title }}</h3>
-    <p class="text-body-2 text-medium-emphasis">
-      {{ message }}
-    </p>
-  </v-card>
+  <div class="screen-empty">
+    <v-icon size="64">mdi-clipboard-text-outline</v-icon>
+    <p class="screen-empty__title">{{ title }}</p>
+    <p class="mb-0">{{ message }}</p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -22,3 +30,15 @@ withDefaults(
   },
 );
 </script>
+
+<style scoped>
+/* The heading keeps its emphasis over the sentence under it, but at the
+   design's card-title size rather than Vuetify's `text-h6` (20px/500 Roboto
+   metrics). `.screen-empty` already supplies the family and the muted ink. */
+.screen-empty__title {
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text2);
+  margin-bottom: 0;
+}
+</style>

package/components/Nfc/PatrolReport/ReportFilters.vue

@@ -1,3 +1,17 @@
+<!--
+  The route / time / date filters above a patrol report, and its Export menu.
+
+  The three fields were raw Vuetify: `rounded="lg"` is an 8px corner where the
+  design's input is `--r-inner`, and the label and placeholder sat at Vuetify's
+  own scale rather than `--fs-cell`. `.filter-field` is the design's input, and
+  it is the same class the rest of the estate's filter rows already use, so
+  these three now match every other filter on the product.
+
+  The Export button was `variant="outlined" size="large"` - 44px against the
+  design's 40 - with `rounded="lg"` again. `.screen-btn-ghost` is the design's
+  secondary button; `block` still reaches it, because the layer names
+  `.v-btn--block.screen-btn-ghost` for exactly that.
+-->
 <template>
   <v-row no-gutters class="mb-6">
     <v-col cols="12" md="3" class="pr-md-2 mb-2 mb-md-0">
@@ -7,11 +21,10 @@
         item-title="title"
         item-value="value"
         label="Select Route"
+        class="filter-field"
         variant="outlined"
         density="comfortable"
-        rounded="lg"
         hide-details
-        bg-color="white"
         @update:model-value="updateFilter('route', $event)"
       />
     </v-col>
@@ -26,11 +39,10 @@
         :model-value="modelValue.timeRange"
         :items="options.timeRanges"
         label="Start Time"
+        class="filter-field"
         variant="outlined"
         density="comfortable"
-        rounded="lg"
         hide-details
-        bg-color="white"
         @update:model-value="updateFilter('timeRange', $event)"
       />
     </v-col>
@@ -43,11 +55,10 @@
     >
       <ReportDatePicker
         :model-value="modelValue.date"
+        class="filter-field"
         variant="outlined"
         density="comfortable"
-        rounded="lg"
         hide-details
-        bg-color="white"
         @update:model-value="updateFilter('date', $event)"
       />
     </v-col>
@@ -59,11 +70,9 @@
         <template #activator="{ props: menuProps }">
           <v-btn
             v-bind="menuProps"
-            variant="outlined"
+            class="screen-btn-ghost"
+            variant="flat"
             block
-            size="large"
-            rounded="lg"
-            class="text-none"
             prepend-icon="mdi-export"
           >
             Export

package/components/Nfc/PatrolReport/ReportLocationHeader.vue

@@ -1,11 +1,21 @@
+<!--
+  The site header at the top of a patrol report.
+
+  Was a `variant="flat" rounded="lg"` card with `text-h5` and `text-body-2
+  text-medium-emphasis`. `variant="flat"` is a Vuetify surface with no border,
+  so the block had no edge on either theme; the design's card is
+  `--card` + `--border` + `--r-card` + `--shadow`, which is `.app-card`.
+
+  The two type classes are Vuetify's Roboto scale. `--fs-card-title` and
+  `--text2` are the design's, and `--text2` measures 9.62:1 on a card where
+  `--medium-emphasis` is an opacity applied to the theme ink.
+-->
 <template>
-  <v-card class="text-center pa-8 mt-2" variant="flat" rounded="lg">
+  <div class="app-card text-center pa-8 mt-2">
     <v-icon size="64" class="mb-4">mdi-office-building</v-icon>
-    <h2 class="text-h5 mb-2">{{ location.name }}</h2>
-    <p class="text-body-2 text-medium-emphasis">
-      {{ location.address }}
-    </p>
-  </v-card>
+    <p class="location-header__name">{{ location.name }}</p>
+    <p class="location-header__address mb-0">{{ location.address }}</p>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -15,3 +25,19 @@ defineProps<{
   location: NFCPatrolReportLocation;
 }>();
 </script>
+
+<style scoped>
+.location-header__name {
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+  margin-bottom: 8px;
+}
+
+.location-header__address {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text2);
+}
+</style>

package/components/Nfc/PatrolReport/SummaryReportTable.vue

@@ -1,9 +1,26 @@
+<!--
+  The per-route summary rows of a patrol report.
+
+  Same change as `PatrolRouteSummary`: `variant="flat"` drew no border on
+  either theme and `border-thin` was a hairline outside the theme.
+  `.table-card` is the design's table surface and styles the raw `v-table`'s
+  header row and cells, so the uppercase 11px/800 header and the 49px rows
+  arrive without restating either here.
+
+  The status stays `text-success` / `text-error`. Those ARE the design tokens -
+  `utils/theme.ts` maps Vuetify's `success`/`error` onto `--ok`/`--err` - and
+  swapping them to `StatusChip` would be a meaning change, not a restyle:
+  `utils/status.ts` does not name "Missed", so the shared map would render it
+  NEUTRAL and a missed patrol would stop being red. Raised, not decided here.
+-->
 <template>
-  <v-card class="mb-6" variant="flat" rounded="lg">
-    <v-card-title>{{ title }}</v-card-title>
+  <div class="table-card table-card__shrink mb-6">
+    <div class="summary-table__head">
+      <span class="screen-card-title">{{ title }}</span>
+    </div>
 
-    <v-card-text>
-      <v-table class="border-thin">
+    <div>
+      <v-table>
         <thead>
           <tr>
             <th>Patrol Route Name</th>
@@ -43,8 +60,8 @@
           </tr>
         </tbody>
       </v-table>
-    </v-card-text>
-  </v-card>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -66,6 +83,11 @@ function statusClass(status: NFCPatrolReportSummaryStatus) {
 </script>
 
 <style scoped>
+.summary-table__head {
+  padding: 14px var(--cellpad-x);
+  border-bottom: 1px solid var(--border);
+}
+
 .guard-signature {
   width: 80px;
   height: 40px;