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

package/components/MemberMain.vue

@@ -1,65 +1,65 @@
 <template>
-  <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters>
-        <v-btn
-          v-if="props.seatManagement !== 'index'"
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
+  <div>
+    <!--
+      THE DESIGN'S PAGE SCAFFOLD.
+
+      The handoff opens Members with a 22px title row and puts the tabs INSIDE
+      the card's first row, with the pagination on the far end of that same
+      line. Before this the screen had no title at all - the page name existed
+      only in the rail and the browser tab - and the tabs sat in a toolbar
+      extension, i.e. a second stacked bar below a mostly empty one.
+
+      Nothing here changes what the screen does: the same two tabs route the
+      same way, the same refresh and pager call the same `getAll()`, the same
+      `headers` prop drives the same columns, and the same menu carries the
+      same four actions behind the same permission conditions.
+    -->
+    <PageHeader :title="props.title">
+      <template v-if="props.seatManagement !== 'index'" #actions>
+        <AppButton
           :to="{
             name: props.seatManagement,
             params: { organization: props.orgId },
           }"
-          size="large"
         >
           Manage seats
-        </v-btn>
-      </v-row>
-    </v-col>
-
-    <v-col cols="12">
-      <v-card width="100%" variant="outlined" border="thin" rounded="lg">
-        <v-toolbar density="compact" color="grey-lighten-4">
-          <template #prepend>
-            <v-btn fab icon density="comfortable" @click="getAll()">
-              <v-icon>mdi-refresh</v-icon>
-            </v-btn>
-          </template>
-
-          <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="getAll()"
-              />
-            </v-row>
-          </template>
-
-          <template #extension>
-            <v-tabs
-              v-model="selectedStatus"
-              color="primary"
-              :height="40"
-              @update:model-value="toRoute"
-              class="w-100"
-            >
-              <v-tab
-                v-for="(tab, i) in tabOptions"
-                :value="tab.status"
-                :key="i"
-                class="text-capitalize"
-              >
-                {{ tab.name }}
-              </v-tab>
-            </v-tabs>
-          </template>
-        </v-toolbar>
-
+        </AppButton>
+      </template>
+    </PageHeader>
+
+    <AppCard class="table-card">
+      <CardToolbar :count="pageRange">
+        <template #tabs>
+          <button
+            v-for="(tab, i) in tabOptions"
+            :key="i"
+            type="button"
+            role="tab"
+            class="app-tab"
+            :class="{ 'app-tab--active': selectedStatus === tab.status }"
+            :aria-selected="selectedStatus === tab.status"
+            @click="toRoute(tab.status)"
+          >
+            {{ tab.name }}
+          </button>
+        </template>
+
+        <template #right>
+          <AppButton
+            variant="icon"
+            icon="mdi-refresh"
+            aria-label="Refresh"
+            @click="getAll()"
+          />
+          <local-pagination
+            v-model="page"
+            :length="pages"
+            @update:value="getAll()"
+          />
+        </template>
+      </CardToolbar>
+
+      <div class="app-table-scroll">
         <v-data-table
           :headers="props.headers"
           :items="items"
@@ -73,6 +73,13 @@
           <template #item.nature="{ item }">
             {{ replaceMatch(item.nature, "_", " ") }}
           </template>
+          <!-- The role is a soft pill in the design, not a plain word. Same
+               text, same column, same source field. -->
+          <template #item.roleName="{ item }">
+            <StatusChip v-if="item.roleName" :dot="false" pill tone="info">
+              {{ item.roleName }}
+            </StatusChip>
+          </template>
           <template #item.dateInvited="{ item }">
             {{ formatDateInvited(item.dateInvited) }}
           </template>
@@ -89,8 +96,13 @@
               offset-y
               width="150"
             >
-              <template v-slot:activator="{ props }">
-                <v-icon v-bind="props">mdi-dots-vertical</v-icon>
+              <template v-slot:activator="{ props: menuProps }">
+                <AppButton
+                  v-bind="menuProps"
+                  variant="row"
+                  icon="mdi-dots-vertical"
+                  aria-label="Member actions"
+                />
               </template>
               <v-list>
                 <v-list-item
@@ -128,8 +140,9 @@
             </v-menu>
           </template>
         </v-data-table>
-      </v-card>
-    </v-col>
+      </div>
+    </AppCard>
+
     <ConfirmDialog
       v-model="confirmDialog"
       :loading="updateLoading"
@@ -171,13 +184,20 @@
 
     <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
 
-    <v-dialog v-model="assignRoleDialog" max-width="400px">
-      <v-card>
-        <v-card-title class="text-h5">Assign Role</v-card-title>
-        <v-card-text>
-          <v-form v-model="memberRoleForm" @submit.prevent="updateMemberRole()">
+    <!--
+      Was a `text-h5` title, an untokenised select, and two block buttons - the
+      submit one on `color="black"`, not a token, so it drew a light-theme fill
+      on the dark theme. The shared `.screen-modal` shape now. The footer stays
+      INSIDE the `v-form` because Submit is a `type="submit"` and moving it out
+      would break the form's own submit.
+    -->
+    <v-dialog v-model="assignRoleDialog" max-width="520">
+      <v-card class="screen-modal">
+        <v-card-title>Assign Role</v-card-title>
+        <v-form v-model="memberRoleForm" @submit.prevent="updateMemberRole()">
+          <v-card-text class="screen-modal__body">
             <v-row no-gutters>
-              <v-col cols="12" class="mb-2">
+              <v-col cols="12">
                 <v-row no-gutters>
                   <InputLabel class="text-capitalize" title="Name" required />
                   <v-col cols="12">
@@ -194,6 +214,7 @@
                           : ''
                       "
                       persistent-hint
+                      class="filter-field"
                     ></v-select>
                   </v-col>
 
@@ -202,41 +223,40 @@
                   </v-col>
                 </v-row>
               </v-col>
-
-              <v-col cols="12">
-                <v-row>
-                  <v-col cols="6">
-                    <v-btn
-                      block
-                      variant="text"
-                      @click="setMember({ mode: 'assign-role' })"
-                    >
-                      Cancel
-                    </v-btn>
-                  </v-col>
-                  <v-col cols="6">
-                    <v-btn
-                      block
-                      variant="flat"
-                      color="black"
-                      :disabled="!memberRoleForm"
-                      type="submit"
-                    >
-                      Submit
-                    </v-btn>
-                  </v-col>
-                </v-row>
-              </v-col>
             </v-row>
-          </v-form>
-        </v-card-text>
+          </v-card-text>
+
+          <div class="screen-modal__footer">
+            <v-btn
+              class="screen-btn-ghost"
+              variant="outlined"
+              @click="setMember({ mode: 'assign-role' })"
+            >
+              Cancel
+            </v-btn>
+            <v-btn
+              class="screen-btn-primary"
+              variant="flat"
+              :disabled="!memberRoleForm"
+              type="submit"
+            >
+              Submit
+            </v-btn>
+          </div>
+        </v-form>
       </v-card>
     </v-dialog>
-  </v-row>
+  </div>
 </template>
 
 <script setup lang="ts">
 const props = defineProps({
+  /** The design's page title. Every app that mounts this screen calls it
+      Members; a caller that names it otherwise passes its own. */
+  title: {
+    type: String,
+    default: "Members",
+  },
   orgId: {
     type: String,
     default: "",

package/components/MyAttendanceMain.vue

@@ -17,10 +17,8 @@
           <v-row no-gutters align="center" class="w-100">
             <v-col cols="auto" v-if="canCheckInOut">
               <v-btn
-                class="text-none"
-                rounded="pill"
-                variant="tonal"
-                size="large"
+                class="text-none screen-btn-primary"
+                variant="flat"
                 @click="onCreateItem"
               >
                 {{ hasCheckedInToday ? "Check Out" : "Check In" }}
@@ -28,7 +26,7 @@
             </v-col>
             <v-spacer />
 
-            <v-col cols="auto">
+            <v-col cols="auto" class="filter-field">
               <v-text-field
                 v-model="searchInput"
                 density="compact"

package/components/NavigationItem.vue

@@ -11,7 +11,7 @@
         v-bind="groupProps"
         :prepend-icon="icon"
         color="primary"
-        class="text-subtitle-2"
+        class="nav-item"
         @click.stop="onParentClick"
       >
         {{ title }}
@@ -33,7 +33,7 @@
     :prepend-icon="icon"
     :to="routeTo"
     color="primary"
-    class="text-subtitle-2"
+    class="nav-item"
   >
     {{ title }}
   </v-list-item>
@@ -43,7 +43,7 @@
     :prepend-icon="icon"
     :href="props.link"
     color="primary"
-    class="text-subtitle-2"
+    class="nav-item"
   >
     {{ title }}
   </v-list-item>
@@ -97,3 +97,83 @@ const routeTo = computed(() => {
   return null;
 });
 </script>
+
+<style scoped>
+/**
+ * The sidebar menu row, taken literally from the handoff's `<aside>` — line 56
+ * of `iService365 Redesign.dc.html` for the row and line 57 for its icon:
+ *
+ *   padding:8px 12px; border-radius:10px; font-size:13px;
+ *   font-weight: 800 when active else 600;
+ *   color: var(--accent-text) when active else var(--text2);
+ *   icon: font-size:19px; width:20px; color: var(--accent-text)/var(--muted);
+ *
+ * What this replaced was `text-subtitle-2` — Vuetify's own type scale, 14px/500
+ * with 0.1px tracking — and no inactive colour at all, so an unselected item
+ * was full-strength body ink and read exactly as loud as the page you are on.
+ *
+ * STATED HERE RATHER THAN ONLY IN THE DRAWER because five of this component's
+ * six call sites are `layouts/*` in the ORG app, outside `.brand-drawer`.
+ * `LayoutNavigationDrawer` already states the same shape for the rows it
+ * contains; the values below are deliberately IDENTICAL to that block, so the
+ * specificity tie between them cannot change what is drawn.
+ *
+ * `margin: 1px 10px` from the handoff is NOT set here: the drawer insets its
+ * own list (`.v-list { padding: 0 8px 12px }`), and a margin as well would
+ * double the inset in the ten apps that do use the drawer.
+ */
+.nav-item {
+  min-height: 38px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-inline: 12px;
+  /* `!important` is not carelessness: Vuetify puts the `rounded-0` UTILITY on
+     the item, and utilities are themselves `!important`. Measured without it,
+     this row drew `border-radius: 0px`. */
+  border-radius: var(--r-inner) !important;
+  font-family: var(--font-sans);
+  font-size: var(--fs-nav);
+  font-weight: var(--fw-cell);
+  letter-spacing: 0;
+  color: var(--text2);
+}
+
+.nav-item.v-list-item--active {
+  font-weight: var(--fw-section-label);
+}
+
+/**
+ * The active row's INK is not set here on purpose. `color="primary"` puts
+ * Vuetify's `text-primary` on the item, that utility is `!important`, and
+ * `primary` is mapped to `--accent-text` — which is the colour the handoff
+ * names for an active row. So the rule above wins for an inactive row and
+ * loses, correctly, for an active one.
+ */
+.nav-item :deep(.v-list-item__prepend > .v-icon) {
+  font-size: 19px;
+  width: 20px;
+  text-align: center;
+  opacity: 1;
+}
+
+/* Muted only while inactive — an explicit colour on the icon would also
+   out-rank the inherited `--accent-text` on the row you are actually on. */
+.nav-item:not(.v-list-item--active) :deep(.v-list-item__prepend > .v-icon) {
+  color: var(--muted);
+}
+
+/**
+ * The handoff's 10px between icon and label. Vuetify holds that distance in a
+ * spacer element, so a margin on the icon leaves it where it was.
+ *
+ * The selector is Vuetify's own shape ON PURPOSE. Vuetify sets the gap with
+ * `.v-list-item__prepend > .v-icon ~ .v-list-item__spacer { width: 32px }` —
+ * three classes. A scoped `.nav-item :deep(.v-list-item__spacer)` is also
+ * three (the scope attribute counts), so it TIES and loses on source order.
+ * Measured: the gap stayed at Vuetify's 32px. Matching the shape makes it four
+ * and it wins on specificity rather than on load order.
+ */
+.nav-item :deep(.v-list-item__prepend > .v-icon ~ .v-list-item__spacer) {
+  width: 10px;
+}
+</style>

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