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

package/components/NotificationSettings.vue

@@ -2,9 +2,11 @@
   <v-row no-gutters class="pa-8" justify="center">
     <v-col cols="12" md="10">
       <v-row no-gutters>
-        <v-col cols="12" class="text-h5">Notifications</v-col>
+        <v-col cols="12">
+          <PageHeader title="Notifications" />
+        </v-col>
 
-        <v-col cols="12" md="8" class="mt-4 font-weight-light">
+        <v-col cols="12" md="8" class="screen-hint intro-copy">
           Choose what you want to hear about, and how. These settings are yours
           alone and apply everywhere you use iService — on this site and on your
           phone.
@@ -33,81 +35,69 @@
         <template v-else>
           <!-- everything, at once -->
           <v-col cols="12" class="mt-8">
-            <v-card
-              width="100%"
-              border="grey-darken-3 sm"
-              variant="outlined"
-              rounded="lg"
-            >
+            <AppCard>
               <v-row no-gutters align="center" class="pa-6">
                 <v-col cols="12" sm="8">
-                  <div class="text-h6">Everything</div>
-                  <div class="text-body-2 text-medium-emphasis mt-1">
+                  <div class="screen-card-title">Everything</div>
+                  <div class="screen-hint summary-line mt-1">
                     {{ everythingSummary }}
                   </div>
                 </v-col>
                 <v-col cols="12" sm="4" class="d-flex justify-sm-end mt-3 mt-sm-0">
-                  <v-btn
-                    variant="tonal"
-                    rounded="xl"
-                    class="text-none"
+                  <AppButton
+                    variant="ghost"
                     :disabled="saving"
                     @click="setAll(!allOn)"
                   >
                     {{ allOn ? "Turn everything off" : "Turn everything on" }}
-                  </v-btn>
+                  </AppButton>
                 </v-col>
               </v-row>
-            </v-card>
+            </AppCard>
           </v-col>
 
           <!-- one panel per module, collapsed by default so a person with many
                modules gets a short list rather than a wall of switches -->
           <v-col cols="12" class="mt-4">
-            <v-expansion-panels variant="accordion" multiple>
+            <v-expansion-panels variant="accordion" multiple class="screen-accordion">
               <v-expansion-panel
                 v-for="category in categories"
                 :key="category.key"
                 :value="category.key"
                 elevation="0"
-                class="border-sm rounded-lg mb-2"
               >
                 <v-expansion-panel-title>
                   <v-row no-gutters align="center">
                     <v-col cols="12" sm="6">
-                      <span class="text-subtitle-1 font-weight-medium">
-                        {{ category.label }}
-                      </span>
-                      <v-chip
+                      <span>{{ category.label }}</span>
+                      <!-- "Safety" is a TAG, not a status word, so it takes
+                           the handoff's tag chip - "small 7px-radius label" -
+                           which is the dotless shape, on the `info` tone the
+                           handoff assigns to "Role & info tags". A leading dot
+                           here would draw it as a status the screen does not
+                           have. -->
+                      <StatusChip
                         v-if="category.safety"
-                        size="x-small"
+                        tone="info"
+                        label="Safety"
+                        :dot="false"
                         class="ml-2"
-                        variant="tonal"
-                        color="info"
-                      >
-                        Safety
-                      </v-chip>
+                      />
                     </v-col>
-                    <v-col
-                      cols="12"
-                      sm="6"
-                      class="text-body-2 text-medium-emphasis"
-                    >
+                    <v-col cols="12" sm="6" class="screen-hint summary-line">
                       {{ summaryFor(category) }}
                     </v-col>
                   </v-row>
                 </v-expansion-panel-title>
 
                 <v-expansion-panel-text>
-                  <div class="text-body-2 text-medium-emphasis mb-4">
+                  <div class="screen-hint summary-line mb-4">
                     {{ category.description }}
                   </div>
 
-                  <v-btn
-                    size="small"
-                    variant="outlined"
-                    rounded="xl"
-                    class="text-none mb-4"
+                  <AppButton
+                    variant="ghost"
+                    class="mb-4"
                     :disabled="saving || !switchableIn(category).length"
                     @click="setCategory(category, !categoryAllOn(category))"
                   >
@@ -116,7 +106,7 @@
                         ? "Turn all off for " + category.label
                         : "Turn all on for " + category.label
                     }}
-                  </v-btn>
+                  </AppButton>
 
                   <!-- one channel per row: a switch must never sit beside the
                        NEXT channel's label, which is what a three-up grid does -->
@@ -132,8 +122,8 @@
                         :class="{ 'channel-unavailable': !channel.supported }"
                       >
                         <div class="pr-4">
-                          <div class="text-body-1">{{ channel.label }}</div>
-                          <div v-if="!channel.supported" class="text-caption mt-1">
+                          <div class="channel-label">{{ channel.label }}</div>
+                          <div v-if="!channel.supported" class="channel-note mt-1">
                             {{ channel.note }}
                           </div>
                         </div>
@@ -162,21 +152,18 @@
 
     <!-- switching a safety alert off: say plainly what stops arriving -->
     <v-dialog v-model="confirmOpen" max-width="460" persistent>
-      <v-card rounded="lg" class="pa-2">
-        <v-card-title class="text-h6">{{ confirmText.title }}</v-card-title>
-        <v-card-text class="text-body-1">{{ confirmText.body }}</v-card-text>
+      <v-card class="screen-modal pa-2">
+        <v-card-title>{{ confirmText.title }}</v-card-title>
+        <v-card-text class="screen-modal__body">
+          {{ confirmText.body }}
+        </v-card-text>
         <v-card-actions class="justify-end">
-          <v-btn variant="text" class="text-none" @click="cancelConfirm">
+          <AppButton variant="ghost" @click="cancelConfirm">
             {{ confirmText.cancel }}
-          </v-btn>
-          <v-btn
-            color="primary"
-            variant="tonal"
-            class="text-none"
-            @click="acceptConfirm"
-          >
+          </AppButton>
+          <AppButton @click="acceptConfirm">
             {{ confirmText.confirm }}
-          </v-btn>
+          </AppButton>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -346,6 +333,31 @@ onMounted(load);
 </script>
 
 <style scoped>
+/* The handoff names no type for long-form intro copy or a summary line, so
+   both take the design's own secondary sizes rather than Vuetify's `text-h6`
+   / `text-body-2` scale. */
+.intro-copy {
+  font-size: var(--fs-cell);
+  margin-top: 6px;
+}
+
+.summary-line {
+  font-size: var(--fs-breadcrumb);
+}
+
+.channel-label {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: var(--fw-cell);
+  color: var(--text);
+}
+
+.channel-note {
+  font-family: var(--font-sans);
+  font-size: var(--fs-breadcrumb);
+  color: var(--text2);
+}
+
 /* Unavailable channels are shown and explained, never hidden.
  *
  * They are NOT faded. The disabled switch already says the control cannot be

package/components/OnlineFormsConfiguration.vue

@@ -1,29 +1,27 @@
 <template>
   <v-row no-gutters>
-    <v-col cols="12" class="mb-2">
-      <v-row no-gutters style="gap: 8px">
-        <v-btn
-          class="text-none"
-          rounded="pill"
-          variant="tonal"
-          size="large"
-          @click="setOnlineForm()"
-          v-if="canCreate && canCreateOnlineFormConfiguration"
-        >
-          Add Online Form
-        </v-btn>
-      </v-row>
+    <v-col cols="12">
+      <!--
+        The screen's name and its one primary action on the same line, which is
+        how the design opens every screen. "Configuration" is the app's own nav
+        label (Online Forms > Configuration), not invented copy. The page that
+        mounts this is a bare mount with no heading of its own.
+      -->
+      <PageHeader title="Configuration">
+        <template #actions>
+          <AppButton
+            v-if="canCreate && canCreateOnlineFormConfiguration"
+            @click="setOnlineForm()"
+          >
+            Add Online Form
+          </AppButton>
+        </template>
+      </PageHeader>
     </v-col>
     <v-col cols="12">
-      <v-card
-        width="100%"
-        variant="outlined"
-        border="thin"
-        rounded="lg"
-        :loading="loading"
-      >
-        <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
-          <template #prepend>
+      <AppCard class="table-card">
+        <CardToolbar :count="pageRange">
+          <template #left>
             <v-btn
               fab
               icon
@@ -42,32 +40,25 @@
             >
               <v-icon>mdi-sort-alphabetical-ascending</v-icon>
             </v-btn>
-            <v-text-field
+            <AppField
               v-model="search"
-              density="compact"
-              variant="outlined"
+              search
+              compact
               placeholder="Search..."
-              prepend-inner-icon="mdi-magnify"
-              clearable
-              hide-details
-              style="width: 220px; margin-left: 12px;"
+              klass="online-forms-config__search"
             />
           </template>
 
-          <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"
-                @update:value="getOnlineFormConfigurations"
-              />
-            </v-row>
+          <template #right>
+            <local-pagination
+              v-model="page"
+              :length="pages"
+              @update:value="getOnlineFormConfigurations"
+            />
           </template>
-        </v-toolbar>
+        </CardToolbar>
         <v-data-table
+          :loading="loading"
           :headers="headers"
           :items="sortedItems"
           item-value="_id"
@@ -84,7 +75,7 @@
             {{ item.status ? item.status.charAt(0).toUpperCase() + item.status.slice(1) : "N/A" }}
           </template></v-data-table
         >
-      </v-card></v-col
+      </AppCard></v-col
     >
 
     <!-- Create Dialog -->
@@ -435,3 +426,11 @@ function successUpdate() {
 }
 
 </script>
+
+<style scoped>
+/* Same 240px cap the other in-toolbar search fields use, so the field does not
+   eat the toolbar's whole left side. */
+.online-forms-config__search {
+  max-width: 240px;
+}
+</style>

package/components/OvernightParkingAvailability.vue

@@ -35,8 +35,7 @@
             />
           </span>
         </v-row>
-        <v-card class="mt-2">
-          <v-card-text>
+        <AppCard class="mt-2 pa-4">
             <template
               v-for="(slot, index) in overnightParkingSlotsArray"
               :key="slot.day"
@@ -44,9 +43,12 @@
               <v-row no-gutters class="mb-4">
                 <v-col
                   cols="12"
-                  class="text-capitalize mb-2 text-subtitle-1 d-flex align-center justify-space-between"
+                  class="text-capitalize mb-2 d-flex align-center justify-space-between"
                 >
-                  <span class="font-weight-black">{{ slot.day }}</span>
+                  <span class="screen-card-title">{{ slot.day }}</span>
+                  <!-- `black-lighten-1` is a literal black: on the dark theme
+                       the off state was a black tick on a #1c1e24 card. Both
+                       states take a token now. -->
                   <v-icon
                     :icon="
                       slot?.isEnabled
@@ -54,10 +56,10 @@
                         : 'mdi-check-circle-outline'
                     "
                     size="20"
-                    :class="{ 'cursor-pointer': !viewMode }"
-                    :color="
-                      slot.isEnabled ? 'green-darken-2' : 'black-lighten-1'
-                    "
+                    :class="[
+                      { 'cursor-pointer': !viewMode },
+                      slot.isEnabled ? 'day-tick--on' : 'day-tick--off',
+                    ]"
                     @click="!viewMode && toggleEnabled(slot.day)"
                   />
                 </v-col>
@@ -91,7 +93,7 @@
 
                 <v-col v-if="!viewMode" cols="12" class="mt-1">
                   <div
-                    class="d-flex align-center ga-1 cursor-pointer text-caption text-medium-emphasis"
+                    class="d-flex align-center ga-1 cursor-pointer screen-hint apply-link"
                     @click="applyToOtherDays(slot.day)"
                   >
                     <v-icon icon="mdi-content-copy" size="14" />
@@ -107,10 +109,10 @@
             </template>
 
             <v-col cols="12" align="end">
+              <!-- Stays a `v-btn`: `:loading` is the only in-flight signal on
+                   this form and AppButton has none. Tokenised instead. -->
               <v-btn
-                color="primary"
-                class="text-none mt-2"
-                size="large"
+                class="screen-btn-primary mt-2"
                 :loading="loading.updating"
                 variant="flat"
                 text="Save"
@@ -118,8 +120,7 @@
                 @click="handleSave('save')"
               />
             </v-col>
-          </v-card-text>
-        </v-card>
+        </AppCard>
       </v-col>
     </v-row>
   </v-form>
@@ -132,12 +133,10 @@
   />
 
   <v-dialog v-model="applyDialog.open" max-width="360" persistent>
-    <v-card>
-      <v-card-title class="text-subtitle-1 font-weight-bold pt-4 px-4"
-        >Apply to days</v-card-title
-      >
-      <v-card-text class="px-4 pb-2">
-        <p class="text-caption text-medium-emphasis mb-3">
+    <v-card class="screen-modal">
+      <v-card-title class="pt-4 px-4">Apply to days</v-card-title>
+      <v-card-text class="screen-modal__body px-4 pb-2">
+        <p class="screen-hint apply-link mb-3">
           Select the days to apply
           <span class="font-weight-bold text-capitalize">{{
             applyDialog.sourceDay
@@ -154,21 +153,45 @@
           class="text-capitalize"
         />
       </v-card-text>
-      <v-card-actions class="px-4 pb-4">
+      <!-- `ga-2`: v-card-actions only spaces `.v-btn` children, and these are
+           the design's own buttons - without it Cancel and Apply touch. -->
+      <v-card-actions class="px-4 pb-4 ga-2">
         <v-spacer />
-        <v-btn variant="text" @click="applyDialog.open = false">Cancel</v-btn>
-        <v-btn
-          color="primary"
-          variant="flat"
+        <AppButton variant="ghost" @click="applyDialog.open = false">
+          Cancel
+        </AppButton>
+        <AppButton
           :disabled="!applyDialog.targetDays.some((d) => d.selected)"
           @click="confirmApply"
-          >Apply</v-btn
         >
+          Apply
+        </AppButton>
       </v-card-actions>
     </v-card>
   </v-dialog>
 </template>
 
+<style scoped>
+/* The prototype names no colour for a per-day enable tick, so it takes the
+   design's own success / muted semantics rather than two literal Vuetify
+   greys - the off state was `black-lighten-1`, which stayed black on the dark
+   theme's card. */
+.day-tick--on {
+  /* `--ok`, not `--success`: the token is named for the design's tone, and an
+     undefined custom property makes the whole declaration invalid, so the tick
+     silently inherited `--text` instead. */
+  color: var(--ok);
+}
+
+.day-tick--off {
+  color: var(--muted);
+}
+
+.apply-link {
+  font-size: var(--fs-breadcrumb);
+}
+</style>
+
 <script setup lang="ts">
 const props = defineProps({
   viewMode: {

package/components/ScanVisitorQRCode.vue

@@ -9,36 +9,27 @@
   >
     <v-container class="d-flex justify-center" max-height="90vh">
       <!-- QR code reader container -->
-      <v-card
-        elevation="2"
-        class="d-flex flex-column align-center pa-2 w-100 h-100"
-      >
-        <v-toolbar>
-          <v-card-title class="text-h5"> Scan QR Code </v-card-title>
-          <v-spacer />
-          <v-btn
-            color="grey-darken-1"
-            icon="mdi-close"
-            @click="closeDialog()"
-          />
-        </v-toolbar>
-
-        <div
-          id="reader"
-          class="d-flex justify-center align-center w-100 h-100"
-          style="height: calc(100vh - 64px)"
-        >
-          <!-- The QR code scanner box -->
-          <!-- This is where the QR code scanner will be displayed -->
+      <v-card class="screen-modal qr-scanner">
+        <div class="qr-scanner__head">
+          <v-card-title>Scan QR Code</v-card-title>
+          <AppButton variant="icon" icon="mdi-close" @click="closeDialog()" />
         </div>
-        <!-- Show Error Messages -->
-        <div v-if="showNotFoundMessage" class="text-error mt-4 text-h5">
-          <p>{{ errorMessage }}</p>
+
+        <div class="screen-modal__body qr-scanner__body">
+          <div id="reader" class="qr-scanner__reader">
+            <!-- The QR code scanner box -->
+            <!-- This is where the QR code scanner will be displayed -->
+          </div>
+          <!-- Show Error Messages -->
+          <p v-if="showNotFoundMessage" class="qr-scanner__error">{{ errorMessage }}</p>
+          <!-- Switch camera button inside the reader box -->
+          <AppButton
+            icon="mdi-camera-switch"
+            class="qr-scanner__switch"
+            aria-label="Switch camera"
+            @click="switchCamera()"
+          />
         </div>
-        <!-- Switch camera button inside the reader box -->
-        <v-btn color="primary" icon class="mt-4" @click="switchCamera()">
-          <v-icon icon="mdi-camera-switch" large />
-        </v-btn>
       </v-card>
     </v-container>
   </v-dialog>
@@ -225,3 +216,48 @@ const stopScanner = () => {
   });
 };
 </script>
+
+<style scoped>
+/* Same scanner frame as the pass-key scanner: the card used to be `w-100`
+   inside the centring container, so keep that width. */
+.qr-scanner {
+  width: 100%;
+}
+
+.qr-scanner__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-right: 12px;
+}
+
+.qr-scanner__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 4px 20px 20px;
+}
+
+.qr-scanner__reader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 320px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--thead);
+}
+
+.qr-scanner__error {
+  margin: 0;
+  font-size: var(--fs-cell);
+  color: var(--err);
+}
+
+.qr-scanner__switch {
+  width: var(--btn-h);
+  padding: 0;
+}
+</style>

package/components/SearchVehicleNumberUser.vue

@@ -1,44 +1,35 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
-      <v-row no-gutters>
-        <v-col cols="12" class="text-h6 font-weight-bold px-3">Vehicle Number ({{ vehicleNumber }})</v-col>
-      </v-row>
-    </v-toolbar>
+  <v-card width="100%" class="screen-modal search-vehicle-user">
+    <v-card-title>Vehicle Number ({{ vehicleNumber }})</v-card-title>
 
-    <v-card-text style="max-height: 100vh; overflow-y: auto">
-      <v-data-table :items="prop.vehicleNumberUsersList" hide-default-footer :headers="headers" density="comfortable" 
-        item-key="_id ">
-        <template #item.name="{ item }">
-          <span class="d-flex align-center ga-2">
-            <span>
-              <AvatarMain :name="item?.name" :size="20" :id="item?._id" />
+    <div class="screen-modal__body search-vehicle-user__body">
+      <!-- `table-card` is the shared table card's own class, so the header
+           type, the cell padding and the row rule are the design's - without
+           TableMain's page toolbar, which a two-row picker inside a dialog
+           has nothing to put in. -->
+      <AppCard class="table-card">
+        <v-data-table :items="prop.vehicleNumberUsersList" hide-default-footer :headers="headers" density="comfortable"
+          item-key="_id ">
+          <template #item.name="{ item }">
+            <span class="d-flex align-center ga-2">
+              <span>
+                <AvatarMain :name="item?.name" :size="20" :id="item?._id" />
+              </span>
+              <span class="text-capitalize">{{ item?.name }}</span>
             </span>
-            <span class="text-capitalize">{{ item?.name }}</span>
-          </span>
-        </template>
+          </template>
 
-        <template #item.actions="{ item }">
-          <v-btn text="Select" rounded="md" flat color="blue" density="comfortable" :ripple="false" @click="handleSelectUser(item)" />
-        </template>
-      </v-data-table>
-    </v-card-text>
+          <template #item.actions="{ item }">
+            <AppButton variant="ghost" @click="handleSelectUser(item)">Select</AppButton>
+          </template>
+        </v-data-table>
+      </AppCard>
+    </div>
 
-    <v-toolbar class="pa-0" density="compact">
-      <v-row no-gutters>
-        <v-col cols="6" class="pa-0">
-          <v-btn block variant="text" class="text-none" size="large" @click="emit('close')" height="48">
-            Close
-          </v-btn>
-        </v-col>
-
-        <v-col cols="6" class="pa-0">
-          <v-btn block variant="flat" color="black" class="text-none" height="48" tile @click="emit('close')">
-            Add Different User
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    <div class="search-vehicle-user__footer">
+      <AppButton variant="ghost" @click="emit('close')">Close</AppButton>
+      <AppButton @click="emit('close')">Add Different User</AppButton>
+    </div>
     <v-dialog v-model="confirmAction" persistent max-width="450">
       <DialogReplaceAutofillPrompt  @close="confirmAction = false" @proceed="handleUpdateUserDetails"/>
     </v-dialog>
@@ -89,4 +80,15 @@ onMounted(() => {
 })
 </script>
 
-<style scoped></style>
+<style scoped>
+.search-vehicle-user__body {
+  padding: 4px 20px 0;
+}
+
+.search-vehicle-user__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px 20px;
+}
+</style>

package/components/SiteSettings.vue

@@ -152,7 +152,10 @@
           Delivery Companies
         </v-expansion-panel-title>
         <v-expansion-panel-text class="">
-          <DeliveryCompany :site="siteId" v-model:initial="deliveryCompanies" @refresh-site="refreshSiteData"
+          <!-- The panel above already names this section, and the component
+               prints its own name unless told not to - so without hide-title
+               the words "Delivery Companies" appear twice on the open panel. -->
+          <DeliveryCompany :site="siteId" hide-title v-model:initial="deliveryCompanies" @refresh-site="refreshSiteData"
             @update:companiesValue="handleUpdateCompanies" :read-only="!canManageSiteSettings" />
         </v-expansion-panel-text>
       </v-expansion-panel>