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

package/components/ManageChecklistMain.vue

@@ -10,10 +10,10 @@
         </v-col>
         <v-spacer />
         <v-col v-if="isScheduleClosed" cols="auto" class="d-flex align-center">
-          <v-chip color="error" variant="tonal" class="text-capitalize">
-            <v-icon start>mdi-lock</v-icon>
+          <StatusChip status="Closed" class="text-capitalize">
+            <v-icon size="14">mdi-lock</v-icon>
             Closed – View Only
-          </v-chip>
+          </StatusChip>
         </v-col>
       </v-row>
       <TableHygiene
@@ -29,16 +29,34 @@
         :show-header="true"
         @refresh="getUnitCleanerChecklistRefresh"
       >
+        <!--
+          A failed request is not a schedule with no checklist. Without this the
+          table drew its neutral "No checklist found" for a 500, which reads as
+          "nothing is scheduled here" - a statement the server never made.
+        -->
+        <template v-if="getUnitCleanerChecklistError" #no-data>
+          <DashboardEmptyState error />
+        </template>
+
         <!-- Status icon driven by local activeActions state -->
         <template #item-prepend="{ item, group }">
+          <!--
+            `success` and `error` ARE this theme's tokens (`utils/theme.ts` maps
+            them to `p.ok` / `p.err`), so they stay. `grey-lighten-2` was not -
+            it is Vuetify's raw grey, and it drew the idle circle at 1.32:1
+            against the card where a non-text indicator needs 3:1. The design's
+            de-emphasis token is `--muted`, applied by class because `color`
+            takes a theme name, not a custom property.
+          -->
           <v-icon
             size="20"
+            :class="{ 'checklist-icon--idle': !activeActions[getKey(item, group.set)] }"
             :color="
               activeActions[getKey(item, group.set)] === 'approve'
                 ? 'success'
                 : activeActions[getKey(item, group.set)] === 'reject'
                 ? 'error'
-                : 'grey-lighten-2'
+                : undefined
             "
           >
             {{
@@ -85,7 +103,7 @@
               <v-sheet
                 border
                 rounded="lg"
-                class="d-inline-flex flex-column pa-3 bg-grey-lighten-5"
+                class="d-inline-flex flex-column pa-3"
                 style="max-width: 420px"
               >
                 <div class="d-flex align-center ga-2 mb-2">
@@ -93,9 +111,7 @@
                   <span class="text-caption font-weight-bold">
                     Rejection details
                   </span>
-                  <v-chip size="x-small" color="error" variant="tonal">
-                    Rejected
-                  </v-chip>
+                  <StatusChip status="Rejected" :dot="false" />
                 </div>
                 <div
                   v-if="item.remarks"
@@ -173,32 +189,36 @@
         <template #group-header-append="{ group }">
           <v-row no-gutters align="center" class="ga-2">
             <v-col v-if="isGroupAnyApproved(group)" cols="auto">
-              <v-chip
-                size="x-small"
-                :color="isGroupComplete(group) ? 'success' : 'warning'"
-                variant="tonal"
-                :prepend-icon="
-                  isGroupComplete(group)
-                    ? 'mdi-check-circle-outline'
-                    : 'mdi-progress-clock'
-                "
+              <StatusChip
+                :status="isGroupComplete(group) ? 'Completed' : 'Ongoing'"
+                :tone="isGroupComplete(group) ? 'ok' : 'warn'"
+                :dot="false"
                 class="text-none"
               >
+                <v-icon size="12">
+                  {{
+                    isGroupComplete(group)
+                      ? "mdi-check-circle-outline"
+                      : "mdi-progress-clock"
+                  }}
+                </v-icon>
                 {{ isGroupComplete(group) ? "Completed" : "Ongoing" }}
                 <template v-if="getGroupCompletedByName(group)">
                   · {{ getGroupCompletedByName(group) }}
                 </template>
-              </v-chip>
+              </StatusChip>
             </v-col>
             <v-col
               v-if="group.attachments && group.attachments.length > 0"
               cols="auto"
             >
+              <!-- `variant="tonal"` was Vuetify's own tinted slab in the row -
+                   the same off-design control `EquipmentManagementMain` had.
+                   The design's ghost button. -->
               <v-btn
-                size="x-small"
-                variant="tonal"
-                color="primary"
-                class="text-none"
+                size="small"
+                variant="outlined"
+                class="screen-btn-ghost"
                 prepend-icon="mdi-paperclip"
                 @click.stop="openAttachmentDialog(group.set, group.attachments)"
               >
@@ -213,9 +233,16 @@
     </v-col>
   </v-row>
 
+  <!--
+    Was a bare `v-card` (Vuetify's own `surface`, a shade off the design's card)
+    with a `text-h5` title, and a `v-card-actions` footer whose Cancel sat on
+    `color="grey"` - not a token, so it drew the same grey on both themes and
+    the two buttons were right-aligned rather than the design's two equal
+    halves. It is the shared `.screen-modal` shape now.
+  -->
   <v-dialog v-model="showCompletionModal" max-width="600" persistent>
-    <v-card>
-      <v-card-title class="text-h5 pa-4">
+    <v-card class="screen-modal">
+      <v-card-title>
         {{
           modalData.currentSet !== undefined
             ? `Set ${modalData.currentSet} Completed`
@@ -225,15 +252,17 @@
 
       <v-divider />
 
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body pa-4">
         <v-row>
           <v-col cols="12">
             <InputLabel title="Remarks" :required="false" class="mb-2" />
+            <!-- `.filter-field` is the design's field on a `v-textarea`: the
+                 10px corner and 13.5px type, without taking the binding away. -->
             <v-textarea
               v-model="modalData.remark"
+              class="filter-field"
               placeholder="Enter your remarks here"
               rows="4"
-              variant="outlined"
               density="comfortable"
               hide-details
             />
@@ -252,38 +281,47 @@
         </v-row>
       </v-card-text>
 
-      <v-divider />
-
-      <v-card-actions class="pa-4">
-        <v-spacer />
-        <v-btn color="grey" variant="text" @click="closeModal"> Cancel </v-btn>
+      <div class="screen-modal__footer">
         <v-btn
-          color="primary"
+          class="screen-btn-ghost"
+          variant="outlined"
+          @click="closeModal"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
           variant="flat"
           @click="submitModal"
           :disabled="!isModalValid"
         >
           Submit
         </v-btn>
-      </v-card-actions>
+      </div>
     </v-card>
   </v-dialog>
 
+  <!--
+    Same shape, and this one carried BOTH of the defects that repeated across
+    this claim: a `v-toolbar` as the footer bar (Vuetify's `surface`, a grey
+    slab that stays grey on dark) and `color="black"` on the confirm button -
+    not a token, so a black slab painted on the dark theme too.
+  -->
   <v-dialog v-model="showRejectModal" max-width="600" persistent>
-    <v-card>
-      <v-card-title class="text-h5 pa-4">Reject Checklist Item</v-card-title>
+    <v-card class="screen-modal">
+      <v-card-title>Reject Checklist Item</v-card-title>
 
       <v-divider />
 
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body pa-4">
         <v-row>
           <v-col cols="12">
             <InputLabel title="Remarks" :required="true" class="mb-2" />
             <v-textarea
               v-model="rejectModal.remarks"
+              class="filter-field"
               placeholder="Enter remarks"
               rows="4"
-              variant="outlined"
               density="comfortable"
               hide-details
             />
@@ -302,61 +340,50 @@
         </v-row>
       </v-card-text>
 
-      <v-divider />
-
-      <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"
-              height="48"
-              :disabled="rejectModal.submitting"
-              @click="closeRejectDialog"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="48"
-              :loading="rejectModal.submitting"
-              :disabled="!isRejectModalValid || rejectModal.submitting"
-              @click="submitRejectDialog"
-            >
-              Confirm
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <div class="screen-modal__footer">
+        <v-btn
+          class="screen-btn-ghost"
+          variant="outlined"
+          :disabled="rejectModal.submitting"
+          @click="closeRejectDialog"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          class="screen-btn-primary"
+          variant="flat"
+          :loading="rejectModal.submitting"
+          :disabled="!isRejectModalValid || rejectModal.submitting"
+          @click="submitRejectDialog"
+        >
+          Confirm
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 
+  <!--
+    The design's modal close control is the borderless 32px square
+    `.screen-modal__close`, not the bordered toolbar icon button. The title was
+    a hand-set `text-h6 font-weight-bold`; `.screen-modal .v-card-title` is the
+    design's card-title size and weight, so the local pair goes.
+  -->
   <v-dialog v-model="showAttachmentDialog" max-width="700" scrollable>
-    <v-card>
-      <v-card-title class="d-flex align-center pa-4">
-        <span class="text-h6 font-weight-bold">
-          Set {{ attachmentDialogSetNum }} — Attachments
-        </span>
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        <span>Set {{ attachmentDialogSetNum }} — Attachments</span>
         <v-spacer />
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
           @click="showAttachmentDialog = false"
         />
       </v-card-title>
 
       <v-divider />
 
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body pa-4">
         <v-row>
           <v-col
             v-for="(id, index) in attachmentDialogIds"
@@ -404,11 +431,16 @@
   </v-dialog>
 
   <v-dialog v-model="showLightbox" max-width="900">
-    <v-card>
+    <v-card class="screen-modal">
       <v-card-actions class="pa-2 justify-end">
-        <v-btn icon="mdi-close" variant="text" @click="showLightbox = false" />
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          class="screen-modal__close"
+          @click="showLightbox = false"
+        />
       </v-card-actions>
-      <v-card-text class="pa-2 pt-0">
+      <v-card-text class="screen-modal__body pa-2 pt-0">
         <v-img :src="lightboxSrc" contain max-height="80vh" />
       </v-card-text>
     </v-card>
@@ -418,6 +450,7 @@
 </template>
 
 <script setup lang="ts">
+import { readListPage } from "../utils/list-page";
 import useCleaningSchedules from "../composables/useCleaningSchedules";
 import useCustomerSite from "../composables/useCustomerSite";
 import useFile from "../composables/useFile";
@@ -628,6 +661,7 @@ const {
   data: getUnitCleanerChecklistReq,
   refresh: getUnitCleanerChecklistRefresh,
   pending: loading,
+  error: getUnitCleanerChecklistError,
 } = await useLazyAsyncData(
   `get-all-unit-cleaner-checklist`,
   () =>
@@ -652,13 +686,20 @@ watchEffect(() => {
   }
 });
 
+// The page totals are the server's count of the WHOLE list, read through the
+// one helper that knows how a paginated reply is shaped - never re-derived
+// from the rows on this page. Applied unconditionally so that when a request
+// fails the reply goes null and the header falls back to the placeholder,
+// instead of leaving the previous page's total on screen as if it still held.
+// `page` still only moves when the server states it, so a failed request does
+// not knock the reader back to page 1.
 watchEffect(() => {
-  if (getUnitCleanerChecklistReq.value) {
-    items.value = getUnitCleanerChecklistReq.value.items;
+  const listPage = readListPage<TChecklistSet>(getUnitCleanerChecklistReq.value);
+  items.value = listPage.items;
+  if (getUnitCleanerChecklistReq.value?.page)
     page.value = getUnitCleanerChecklistReq.value.page;
-    pages.value = getUnitCleanerChecklistReq.value.pages;
-    pageRange.value = getUnitCleanerChecklistReq.value.pageRange;
-  }
+  pages.value = listPage.pages;
+  pageRange.value = listPage.pageRange;
 });
 
 watchEffect(() => {
@@ -1006,3 +1047,12 @@ async function _updateUnitChecklist({
   }
 }
 </script>
+
+<style scoped>
+/* The idle checklist circle. `--muted` is the design's de-emphasis token and
+   clears the 3:1 bar a non-text indicator needs; Vuetify's `grey-lighten-2`
+   read 1.32:1. */
+.checklist-icon--idle {
+  color: var(--muted);
+}
+</style>

package/components/MemberInformation.vue

@@ -1,9 +1,12 @@
 <template>
   <v-row no-gutters class="w-100">
-    <v-card class="w-100">
-      <v-card-text>
-        <v-btn block color="primary-button" :height="40" text="Scan QR Code" class="text-capitalize"
-          prepend-icon="mdi-qrcode" @click="handleScanQRPass" />
+    <AppCard class="w-100 pa-4">
+        <!-- GHOST, not primary: the handoff names "Scan QR Code" in its
+             ghost/secondary list, alongside Bulk Upload, Download Report and
+             Export. Stays a `v-btn` because `block` has no AppButton
+             equivalent, so the design's button is applied as a class. -->
+        <v-btn block :height="38" text="Scan QR Code" variant="outlined"
+          class="screen-btn-ghost" prepend-icon="mdi-qrcode" @click="handleScanQRPass" />
         <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorScanPassMessage = ''">
           <v-row no-gutters class="pt-5 ga-2">
             <v-col cols="12">
@@ -75,27 +78,32 @@
                 v-model:cards="memberPassCards" :settings="props.settings" :loading="props.settingsLoading"
                 :site-id="props.site" :unit-id="props.unitId" :visitor-type="props.type"
                 :hid-qr-code-enabled="props.hidQrCodeEnabled" :hid-qr-printer-configured="props.hidQrPrinterConfigured"
+                :hid-reader-name="props.hidReaderName" :hid-portal-name="props.hidPortalName"
                 :excluded-card-ids="props.selectedNfcCards.map((c) => c._id)" />
             </v-col>
 
             <v-row class="pt-3" justify="space-between">
               <v-col cols="6">
-                <v-btn text="Add Member" :disabled="!validForm" prepend-icon="mdi-plus" color="primary-button"
-                  class="text-capitalize" @click="handleAddMember" />
+                <!-- The primitive rather than a class on a v-btn: these two
+                     need nothing Vuetify owns, and AppButton is the only way
+                     they draw at the handoff's 40px / 38px. -->
+                <AppButton icon="mdi-plus" :disabled="!validForm" @click="handleAddMember">
+                  Add Member
+                </AppButton>
               </v-col>
               <v-col cols="6" align="end">
-                <v-btn text="Clear Form" prepend-icon="mdi-refresh" color="primary-button" class="text-capitalize"
-                  @click.stop="handleClearForm" />
+                <AppButton variant="ghost" icon="mdi-refresh" @click.stop="handleClearForm">
+                  Clear Form
+                </AppButton>
               </v-col>
             </v-row>
           </v-row>
         </v-form>
-      </v-card-text>
-    </v-card>
+    </AppCard>
     <visitor-pass-key-q-r-scanner :dialog="dialog.scanQRCode" v-model:scannedValue="scannedPassValue"
       @close-dialog="dialog.scanQRCode = false" />
     <v-dialog v-model="dialog.memberAutofillOptions" max-width="430">
-      <v-card v-if="memberSelectedSearchResult" class="nric-options-card">
+      <v-card v-if="memberSelectedSearchResult" class="nric-options-card screen-modal">
         <v-card-actions class="justify-end pa-1">
           <v-btn icon="mdi-close" variant="text" size="small" @click="memberCloseAutofillOptions" />
         </v-card-actions>
@@ -126,10 +134,10 @@
         </v-card-text>
 
         <v-card-actions class="justify-end px-4 pb-4">
-          <v-btn variant="text" class="text-none" size="small" @click="memberCloseAutofillOptions">
+          <v-btn variant="outlined" class="screen-btn-ghost" size="small" @click="memberCloseAutofillOptions">
             Cancel
           </v-btn>
-          <v-btn color="primary-button" variant="flat" class="text-none px-5" size="small"
+          <v-btn variant="flat" class="screen-btn-primary px-5" size="small"
             @click="memberConfirmAutofillOptions">
             Select
           </v-btn>
@@ -192,6 +200,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  hidReaderName: {
+    type: String,
+    default: "",
+  },
+  hidPortalName: {
+    type: String,
+    default: "",
+  },
   selectedNfcCards: {
     type: Array as PropType<{ _id: string; cardNo: string }[]>,
     default: () => [],
@@ -617,13 +633,13 @@ function handleRemoveMember(index: number) {
 }
 
 .nric-options-title {
-  color: #06253b;
+  color: var(--text);
   font-size: 1.45rem;
   line-height: 1.2;
 }
 
 .nric-options-section-title {
-  color: #06253b;
+  color: var(--text);
   font-size: 1.05rem;
   line-height: 1.25;
 }
@@ -631,7 +647,7 @@ function handleRemoveMember(index: number) {
 .nric-selected-person {
   border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 12px;
-  color: #06253b;
+  color: var(--text);
   font-size: 0.95rem;
   min-height: 52px;
   padding: 10px 14px;